The id Selector in HTML and CSS

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 for attribute

• 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.

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 use of id, as adjacent, nth-child and attribute selectors (particularly when used with ARIA roles) have been found to be are 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 in XHTML. 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.