CSS ID and class selectors: details

The first concept we need to grasp about CSS ID and class selectors is their usage: an ID selector can be used only once per page, whereas a class selector can be used more than once. Speaking from a SGML and DOM perspective, an ID must be unique throughout the page. If we use the same ID more than once, we stumble on a validation error and a DOM ambiguity (though browsers consider only the first ID in a series as a valid ID).

On the contrary, a class attribute can actually refer to multiple elements. For example:

<div class="evident"></div>
<p class="evident"></p>
<p><span class="evident"></span></p>

We can specify the following styles for the above markup:

.evident {
  background: yellow;
  padding: 0.3em;
}

These styles apply to all element disregarding their type. If we want to be more specific, we can add an element type before the class declaration, like so:

.evident {
  background: yellow;
  padding: 0.3em;
}

div.evident {
  border: thick solid orange;
}

Now the div with the CSS class evident will also have a thick orange border plus a yellow background and some padding. Another thing due to the cascade is the fact that CSS classes can actually be cumulative, in the sense that they can combine different styles by merging non-conflicting CSS rules taken from different class names. Example:

<div class="evident"></div>
<p class="evident"></p>
<p><span class="evident"></span></p>
<div class="evident pullquote"></div>

Here are the styles:

.evident {
  background: yellow;
  padding: 0.3em;
}

.pullquote {
  float: left;
  width: 200px;
  border: 3px solid orange;
}

The final result will be a left-floated div with a yellow background, some padding, a solid orange border and a width of 200px. Note that in this case the CSS rules are non-conflicting, because there are five different rules. If I specify a width of 100px in the first class, this declaration will be overridden by the second class because of the cascade (the second class definition comes later in the source).

ID selectors, instead, can be used to stylize very specific sections of a page. They're also used in scripting to create hooks for triggering DOM events or manipulate the DOM itself. From a JavaScript and DOM perspective, IDs are much faster than classes in terms of performance, because less steps are required to walk the DOM tree. An interesting and useful technique that involves IDs consists of setting a different ID on the body element of different pages, usually when they represent different sections of a web site. This is useful, because we can take advantage of the cascade to write page-specific styles, like so:

#navigation {
   float: left;
}
#content {
  float:right;
}

body#articles #navigation {
  float: right;
}
body#articles #content {
  float: left;
}

In this case, we get the effect of inverted column order on a specific page / section of our site. Really handy.