CSS id Selector

Last Updated Jul 21, 2015, 12:00:06 PM





CSS id Selector

The css id selector targets a specific HTML element with a unique id

CSS id selector is used to overcome the problem raised in element selector. When you have too many elements with the same name, and you want to target each of the CSS elements it would be very difficult.

Syntax

CSS id selector is used to target each and every element or any no of elements in a web page by giving them unique ids. Imagine, if you have 10 paragraphs you can give 10 different uniq names and target them using the id selector.

Id selector is starts with # symbol followed by the selector name

For example take look at the below example

This is how you can give the selector name. See the below css selector code to to understand how you can target that mypara1 and mypara2 ids

Example Note:

Selector names must be unique


The style rule below will be applied to the HTML element with id="mypara1" and id="mypara2":

After applying the css to the above html, it will produce the following result

Output

Watch GIF Try It Now

Browser compatibility
Feature
Basic support Yes Yes Yes Yes Yes ? ?


CSS Selectors Reference

CSS Selectors Reference

CSS Combinators

Other CSS Selectors you might want to learn

CSS Class Selector

CSS Group Selector

CSS Child Combinator

CSS General Combinator

CSS Adjacent Combinator



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM