TomBecker.net

CSS Selector's specificity

A co-worker came by late yesterday to ask a CSS question. He was having some trouble with duplicate style definitions over riding each other. I mentioned to him that the order of things sometimes makes a difference, and that I think some things are more "important" than others.

What I didn't realize is that it goes much deeper than my cursory understanding of how CSS rules are applied. I thought in general whatever comes last wins. But I was wrong. Enter selector specificity.

According to the W3C there are very specific rules to how the CSS rules get applied. From their site:

A selector's specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
  
• count the number of other attributes and pseudo-classes in the selector (= b)
  
• count the number of element names in the selector (= c)
  
• ignore pseudo-elements.
  

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Here is another take on it. It maybe a little bit easier to understand, and a little bit more Star Wars'y (not to sure if that is a word...). Good article all around

So selector specificity is a little confusing but it is really just counting, and will hopefully eliminate a little bit of the confusion that is CSS.

Labels: CSS

posted by Tom Becker at 5/07/2008