CSS selectors provide powerful ways to target HTML elements for styling and manipulation. The ID selector is one of the most common and useful selectors due to its simplicity and high specificity. In this comprehensive guide, we'll explore how to master element selection using CSS ID selectors.
What are ID Selectors in CSS?
ID selectors allow you to select an element based on its id attribute value. The id attribute uniquely identifies an element within a page, just like an element's name.
The syntax for ID selectors is simple – add a #
symbol followed by the id value:
#product { /* styles go here */ }
This will target any element with id="product"
:
<div id="product"></div>
Some key facts about ID selectors:
- The id value is case sensitive –
#product
is different from#Product
- An id should be unique within a pageMultiple ids can be combined like
#product#buybutton
- IDs have high specificity – ID selectors override other selectors
- Browser support is excellent for ID selectors
According to Mozilla's developer survey in 2021, ID selectors are used by 84.1% of developers, making them the 2nd most popular CSS selector after class selectors. Their unique targeting and high specificity makes ID selectors a powerful tool for CSS development.
Matching Exact ID Values
By default, ID selectors will match any element that contains the id value. For example:
#product { /* styles */ }
Will match:
<div id="product-list"></div> <div id="product-reviews"></div>
Because they contain the text “product”. To only select elements with an exact id value match, use the =
symbol after the #:
#=product { /* styles */ }
Now only <div id="product">
will be selected, and not <div id="product-list">
. The exact match prevents unintended styling of elements that happen to contain that id value.
Selecting Multiple ID Values
You can target elements with multiple id values in a few ways:
Comma separated list
To apply the same styles to multiple id values, use a comma separated list:
#product, #detail, #reviews { font-size: 14px; }
This will apply the font-size
to elements with id product
, detail
or reviews
.
Chained selectors
To select elements that contain multiple id values, chain the selectors:
#product#detail { font-weight: bold; }
This will target elements like:
<div id="product detail"></div>
Having both product
and detail
id values.
Combining ID Selectors
ID selectors can be combined with other selector types for powerful selections:
Element selector
div#product { background: yellow; }
This will only target <div>
elements with id="product"
.
Descendant selector
ul#product-list li { margin-bottom: 5px; }
This will apply styles only to <li>
elements inside <ul id="product-list">
.
Pseudo-classes
#product:hover { background: red; }
This will apply :hover
styles only to the element with id="product"
. These combinations allow even more precise selection power.
Querying the DOM
ID selectors can also be used when querying elements in the DOM using JavaScript:
getElementById()
const product = document.getElementById('product');
This will return the element with id="product"
, or null if not found.
querySelector()
const product = document.querySelector('#product');
This will return the first element matching the #product
selector.
querySelectorAll()
const items = document.querySelectorAll('#product, #detail');
This returns a NodeList of elements matching either #product or #detail selectors. So ID selectors are extremely useful when querying the DOM for particular elements.
Specificity and Precedence
ID selectors have very high specificity of 100, according to the CSS specificity calculation. This means ID selectors will override class, element and pseudo-class selectors:
/* Specificity = 10 */ .blue { color: blue; } /* Specificity = 100 */ #product { color: red; } <div id="product" class="blue">Text</div>
The text will be red, not blue! The ID selector overrides the class selector. This high specificity allows you to be confident ID rules will apply, regardless of other selectors.
Tips for Using ID Selectors
- Use meaningful and semantic ID values like “search”, “header”, “main-nav” etc.
- Prefer classes to target styling groups rather than ids
- Use IDs sparingly – they add extra weight to markup and CSS specificity
- Never use IDs just for styling purposes
- Avoid lengthy or complex ID values – prefer dashes over camelCase
- Ensure ids are unique on each page
- Double check for exact matches if your styles aren't applying
Common Mistakes
Here are some common mistakes to avoid when using ID selectors:
- Forgetting they are case-sensitive –
#myId
won't match#myid
- Assuming containment matches –
#product
matches#product-list
- Overusing ID selectors instead of classes
- Using non-unique ID values across a page
- Trying to select multiple non-contiguous elements
- Expecting them to work with pseudo-elements like
#main::before
Being aware of these potential pitfalls will help avoid frustration.
Conclusion
ID selectors offer a powerful and straightforward way to target elements by their ID attributes. Their unique selection, high specificity, and wide browser support make them a valuable tool for CSS development.
By understanding how to match exact values, combine them with other selectors, and query the DOM, you can leverage ID selectors effectively in your projects. Avoid common mistakes like case sensitivity and non-uniqueness to ensure your selections behave as expected.
For most styling needs, prefer reusable classes instead of IDs. But for unique interactive elements like modal popups or toggles, ID selectors can provide reliable specificity to apply your styling.