SELECTORS - CSS: Professional Techniques for Modern Layout - page 48

Figure 2-7: Redboxing the descendants of a div .

ID VS. CLASS
One of the i rst big dilemmas faced by any aspiring Web stylist is: Should I use class or id ?

As with many things in life, this question has a simple answer, and then there's a much more
complicated answer. h e simple answer is this: Use class for any “label” that might show up
more than once in a page, and id for anything that will appear only once. By “label,” I mean a
descriptive word you might want to attach to an element, which is what class and id get
used for 99.44% of the time.

Two classic examples of id values are header and footer , on the expectation that any
given page will have only one header and footer. class values are a little more scattered,
since they could be anything from more for links to more information to tabs for any
collection of navigation tabs to odd for every other row in a table.

50

h e more complicated answer requires weighing not only the expected uniqueness of a label,
but also the specii city ef ects of id and class . Since selectors containing id s have higher
specii city than those with just class es, you run into situations where it's impossible to
override a given rule.

Here's a simple example. Suppose you've written in your site styles:

#header { background : black ;}
#header a { color : white ;}

h en later on you decide that your contact page should be less forbidding, so you want to
make your header a nice light gray and all of your navigation links a nice soothing medium
green. Since that contact page has a few collections of navigation links, you write:

#header { background : #BBB ;}
.navlinks a { color : #257000 ;}