There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS.
So what is CSS specificity? It's a weighted value system for all of your selectors. Essentially, each piece of your selector has a value applied to it. This can be explained easiest in three separate groups: IDs, classes & elements. Perhaps one way to look at it is like a card games where face cards have a greater value than say, a 2,3, or 4.
IDs
IDs are the most powerful type of selector you can use. Each ID in your selector will contribute 100 points to the selector's total value. Another thing to remember is IDs should be unique so there's really no reason you should be using more than one ID in your selector, unless you're trying to give your selector a higher point value than another one.
The first example below has a point value of 100, while the second example has a point value of 300.
#content { }
#content #aside #caption { }
Classes
Your second most important type is the class selector. Unlike IDs classes can, and should be used multiple times in a single HTML document. Classes occupy the 10's place in our point value system. This means that every instance of a class in your selector is worth 10 points. This means that a single ID will trump a 9 class selector.
The two selectors below are of equal value. Notice how many classes were used compared to just a single ID, both which have a 100 point value.
#caption { }
.content-highlight .aside-type .float .bold .uppercase .quote .featured .etc .etc .etc { }
Elements
Last but least are elements. An element selector is more generic than IDs and classes. They have the widest range of focus of all selectors. Because of this, element selectors occupy the ones position. Element selectors have a value of 1 point each.
Again, both selectors below have the same point value. Notice how many elements were needed to equal a single class. Selectors inside the negation pseudo-class, :not(), are counted like any other, but the negation itself does not count as a pseudo-class.
.uppercase { }
html body div div blockquote span span span b i { }
Odds & Ends
As we all know the 3 groups of selectors above does not encompass everything. Attributes selectors, and pseudo-classes both have the same value as classes which is 10 points each. The universal selector "*" has no point value.
Real World Usage
Okay, so far I've shown you some absolutely terrible examples of this in use. Almost none of the selectors above should be seen in a production environment. Lets take a look at some real world examples. How the system works is each type is tallied up, and then concatenated together. So 1 ID + 1 Classes + 1 Element would equal 111 points. See below for some more examples from my own stylesheet.
| Selector | IDs | Classes | Elements | Weight |
|---|---|---|---|---|
| #header h2 | 1 | 0 | 1 | 101 |
| #content a[href$=".css"] | 1 | 1 | 1 | 111 |
| #content input[type="text"]:focus | 1 | 2 | 1 | 121 |
| .code li:before | 0 | 2 | 1 | 21 |
| #helper ul li a | 1 | 0 | 3 | 103 |
| .actions li:hover b | 0 | 2 | 2 | 22 |
| #content .comment:target | 1 | 2 | 0 | 120 |
| #content img.loading | 1 | 1 | 1 | 111 |
| table tr:nth-child(odd) | 0 | 1 | 2 | 12 |
Why Is This !important
So now we know how to give our selectors a point value, so what? Why does this even matter? Specificity is extremely valuable if you're working on a website with multiple stylesheets. Perhaps it's a content management system that has a default stylesheet and your job is to overwrite its default values. The old MySpace layout is a great example where people would use specificity to modify their pages to their liking. Perhaps you're a beginner adding some new CSS to a 1000 line CSS file only to find your changes didn't change anything.
Finally I couldn't talk about specificity without mentioning "!important". !important can be applied to individual properties to give them a super-value, thus trumping any prior property references.
#content { color: black; }
html .content { color: #333 !important; }
