Class and ID Selectors

So far, we’ve been grouping selectors and declarations together in a variety of ways, but for all that, the selectors we’ve been using are very simple ones. They only refer to document elements, and while that’s often just what you need, there are times when something a little more specialized is required.

In addition to raw document elements, there are two other kinds of selectors: class and ID selectors, which allow the assignment of styles in a way that is independent of document elements. These selectors can be used on their own or in conjunction with element selectors. However, they only work if you’ve marked up your document appropriately, so using them generally involves a little forethought and planning.

Of course, you probably want to know why you should go to the effort. What will it get you? Let’s consider a document about the handling of plutonium, in which there are various warnings on things to do (or not do) while working with such a dangerous substance. You want to make each warning use boldface text so that it will stand out from everything else.

However, you don’t know what kind of elements these warnings will be. Sometimes there will be a whole paragraph of warning text, but other times there might be a single warning list item out of a lengthy list, or just a given section of a paragraph. In any case, you can’t define a rule using simple selectors of any kind. If you did this:

P {font-weight: bold;}

then all paragraphs will be bold, not ...

Get Cascading Style Sheets: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.