Order
- By ascending priority:
- Ignore pseudo-éléments
- tag is the starting point
- classes and pseudo-classes
- id
- !important server
- style
- !important client
- If a conflict arises between two elements of the same priority, this is the number of elements of the highest level which win (two
idare worth more than oneidand fifteenclass). - If there is still a conflict (two
idversus twoid), writing order decides.
Note #1: the CSS2.1 “non-standard” (I don’t like CSS2.1) considers pseudo-elements as classes for priority, contrary to both CSS2 and CSS3 (source).
Note #2: I’m not sure of the order for style et !important. What I wrote is what I deem logical and this is apparently also (at least partially) the case for Firefox.
Note #3: as said, pseudo-classes order matters too: read Eric Myer on chaining pseudo-classes.
The quesion of the attribute
Beware, an attribute refering an id ([id=p123]) is less specific than this id itself (#p123). Consequently, these attributes are worth less than id. So, I’m still not sure what attributes are worth compared to a class.
Examples
Example #1
div p {color:green} p {color:red} <p>coloured text</p>Green text (two tags vs. one tag; no need for a class or an id to show specificity.
Example #2
p.good {color:green} p {color:red} <p class="good">coloured text</p>Green text (one class vs. no class).
Example #3
#good {color:green} .good {color:red} p {color:yellow} <p id="good">coloured text</p>Green text (one id vs. no id)
Example #4
#good {color:green} .good {color:red} p {color:yellow} <p id="good">premier text</p> <p class="good">second text</p>First text in green, second in red (one id versus non id, one classe versus no class)
Example #5
#good {color:green} .good {color:red} .damn {color:red} p.it {color:red} p {color:red} <p class="good really damn it">first text</p> <p id="good">second text</p>First text in red, second in green. An absentminded person just mixed up class and id and doesn’t understand why the text is not green (any similarities with a blogger would be purely coincidental)… 3 classes (good, damn, it = 30) and 2 tags (2×p = 4) are not worth one id (100). Notice that by keep adding some, that will finally work (well, I’m not sure)
Example #6
p {color:red} <p style="color:green">text in couleur</p>Red text (style vs. no style style). A good way to debug.
Example #7
#good {color:green} p {color:yellow !important} <p id="good">coloured text</p>Yellow text (to check). I am not sure that !important server has priority over style, bit it seems logical.
Example #8
p {color:green} p {color:red} <p id="good">text in couleur</p>Red text.
Equal importance and specificity: writing order decides.
Example #9
<p style="color:red !important;color:green !important">text in couleur</p>Green text.
Equal importance and specificity: writing order decides.
Example #10
p.good {color:green} p {color:red} p.good {color:red} <p class="good">text in couleur</p>Red text.
We have two classes with the same name and wich define the same property (color). The second class wins over the first, by virtue of writing order. Notice this code is badly-written: the first style shall be deleted, since it is overriden by the second one. Nonetheless, this is the kind of code one can find on the site of a webmaster who did not realise why it doesn’t work (or with such a long CSS he can’t find out—that hqppened to me, I’m not proud of it). Notice that by addding p {color:yellow} at the end, the text would stay red, because of the class’ specificity (but with p.good {color:yellow}, it would turn yellow).
Recommended readings
- CSS: Specificity Wars. The post that started it all. Too bad you have to endure some Star Wars verbiage
idvs attribut- calculation of combination
- Molly: CSS2 and CSS2.1 specificity clarified
- Meyerweb: Link Specificity
