After basic element selectors (<body>, <h1>, <p>, etc), id is usually the first CSS selector encountered by web developers. id is easy to learn and apply, but it’s also brittle, as we shall see in a moment.
Before we get there, we should review where id is used:
- In forms, as a means of associating form elements with their associated label, via the
forattribute - In anchors and anchor links, as a means of navigating long pages
- As a way of identifying a unique instance of an element to CSS and JavaScript.
Whatever their purpose, the rules for applying id to HTML tags are always the same: the id value must be a string of characters or numbers, without any spaces*. Most importantly, the value provided to the id attribute cannot be used for another element on the same HTML page. For example, it’s common to do this:
<div id="wrapper"> … </div>As long as this id value only appears once on any page, you can address that particular div element via the following CSS:
div#wrapper { … }You can also use the shortcut #wrapper selector:
#wrapper { … }Either is fine, but you should be aware that the first method takes higher priority over the second in stylesheets. I prefer to use the first, as it makes reading a stylesheet and mapping it to your HTML code a lot easier; whichever method you choose, be sure to use it consistently.
It should also be noted the CSS associated with an id has a higher specificity than classes and other selectors: that is, if a single element is affected by the same property used in both an id and a class, the declaration in the id will take precedence.
The strength of id selectors is also their central weakness: id CSS declarations are devoted to a single element on a page. (Note that the same element, with the same id value, could be used on different pages, and be influenced by the same CSS… the id just can’t appear twice on the same page). This means that the declarations can’t be reused or repurposed.
The Use of id Today
Modern web development has arguably sidelined the use of id: adjacent, nth-child and attribute selectors (particularly when paired with ARIA roles) have been determined to be far more powerful, adaptable and useful, while classes can be conjoined and repurposed. This is particularly true in HTML5, where specialized elements such as <header> have replaced generic div elements that need to be distinguished with different id values. When used haphazardly, id tends to create singular exceptions in CSS, which should be avoided as they create opportunities for visual inconsistency.
That being said, id is easy to understand and use, and they are often necessary, especially with JavaScript. While using the selector will lengthen your stylesheet code, it’s usually better to learn the long way around rather than going directly to more efficient but complex solutions, so id should remain in your arsenal of CSS techniques.
* In XHTML, an id value cannot start with a numeral; doing so is fine in HTML5.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
