Subscribers
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 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 { }
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 { }
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 { }
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.
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 |
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; }
This is a wonderful post, but adding HTML to it would make it the sweetest post on specificity around. Without the HTML, I'm sure some people (myself included) will start to get lost once we try to emulate your id vs class example.
Great post on Specificity, Something i often neglect. If you code with a well refined hierarchy you rarely come across andy problems. Though when working with files greater than a 1000 lines that is definitely where the importance of it comes into play. "Important" can get you out of some fixes it has saved me a few times in the past, though admittedly these days I would avoid it as much as possible!
p.s. #header h2 =102(is this a typo) shouldn't it be 101?
Nice clear defintion of Specificty, which sure comes in handy when working on a CMS. I work within SharePoint at the moment and this understanding is paramont in esnuring your CSS sclaes and works effectivly over the dirty base styles.
@Dana, the selectors used the in chart above is taken directly from my own stylesheet. You can view the source on my pages to see it in action.
@Barry, thanks for pointing that out. It's corrected.
You forgot inline styles. They add 1000. It is at least worth a sentence mention in the post.
Thanks Patrick for pointing that out.
