molly.com

Thursday 6 October 2005

CSS2 and CSS2.1 Specificity Clarified

LEST YOU GET SWEPT UP into the stars with the imaginative Malarkey, who puts a cleverly galactic twist on describing CSS specificity, let me stop you with my own unique powers and clear up his errors before you follow his flawed math and find yourself flung back to earth most painfully.

The confusion has to do with the specificity algorithm being different between CSS specifications. Since most standards-based designers and developers are working with CSS2.1 much of the time, I’m going to show how to calculate specificity according to the CSS2.1 specification. This way, you can make your calculations relevant to the kinds of selectors we’re using in contemporary CSS design.

Here’s an easy way to visualize specificity in CSS2.1:

Example Presence of style in document (inline style) # of ID selectors # of class selectors # of Element (type) selectors
p 0, 0, 0, 1
p.warning 0, 0, 1, 1
#content p.warning 0, 1, 1, 1

The final specificity calculations then would be:

  • p = 0, 0, 0, 1
  • p.warning = 0, 0, 1, 1
  • #content p.warning = 0, 1, 1, 1

Other items of specific interest:

  • The universal selector has a specificity of 0, 0, 0, 0
  • Inherited values have null specificity
  • According to the CSS2.1 specification, it can be interpreted that a pseudo element is calculated as an element, a pseudo-class is calculated as a class, and an attribute selector is also calculated as a class. Note that CSS2 says that pseudo elements should be ignored, further confusing the issue
  • As you can see from this chart, if a rule is applied to an element with an inline style, the inline style has higher specificity than anything. So, you’d add a 1 to the beginning of the style in question, let’s say there’s an inline style on some instance of p , that particular selector would then have a specificity of 1, 0, 0, 1, being the most specific rule of the bunch

And, while it seems natural to drop the comma delimiters and count all this as if it were base 10 (which on first glance make sense) the specification clearly states that a “broad” base is necessary – potentially infinite. While it would be rare to have more than 10 individual selectors in a given category, base 10 doesn’t apply when there are more than 10 selectors present. Eric Meyer explains this a whole lot better than I can in his article Link Specificity.

Filed under:   general
Posted by:   Molly | 23:37 | Comments (45)

Comments (45)

  1. I’ve updated my Sith Power examples. Thanks for the clarification. That’s why I am still the pupil! 🙂

  2. Molly, Malarky and Meyers have brought balance to the force of specificity. A padawan breakfast of maths and selectors to go with my tea! Yum (kinda) but ta 🙂

  3. This whole issue was much of the fun 🙂

  4. Pingback: Specificity wars - Molly vs. Andy - Wait till I come!

  5. Thanks for this to both of you. Specificity is an issue that is often overlooked by CSS newbies, and you guys have both made it very palatable! 🙂

  6. Great article Molly (do you keep these? Can we link to them privately for reference? Damn that sounds so nerdy!) I’ve bookmarked Eric’s cos he never chucks anything away does he! (Wonders what his garage must be like)…I haven’t got to Malarkey’s article yet. I could see in my feeds that you were on the same topic, but went to yours first on this occasion as I went to his first last time…sort of taking turns! 🙂
    This actually makes sense to me (and Eric’s article)…I think I’d struggle to explain it to anyone else…but – yep, I think I get it. And if I can get it – then the rest of the pack (who are far more talented) should be all over it. Thanks for enlightening us about the issues with specificity.

  7. I can I usin CSS have the same effect as with “FRAMES” ? I read your last book but I found no solution to my problem.

    Ciao Vittorio

  8. You didn’t mention the !important modifier. It’s usually clear when it wins out (all rules without the !important), but what about when it conflicts with inline styling? What whens there? With Firefox, a rule from an external stylsheet with “!important” will overule a style attribute.

  9. Pingback: ThatchSpace » CSS: Specificity Wars

  10. No! It’s not true!
    It’s impossible.

  11. Damn. and I had already printed it out for reference for office newbs. Thanks Malarky for the update 🙂

  12. Pingback: torresburriel.com » Lecturas sobre hojas de estilo y estándares web - 10/10/05

  13. Pingback: Tip(z) » CSS och “vikt”

  14. Actually, CSS3 also that says pseudo-classes should be ignored:

    http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity

    2.0: ignore
    2.1: treat as class
    3.0: ignore

  15. In the above comment, make that “pseudo-elements.”

    All three specs say pseudo classes should be treated as classes. It’s the pseudo-elements that they flip-flopped on.

  16. Pingback: Confluence: Application Development

  17. Pingback: Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (10/10/05)

  18. You didn’t mention the !important modifier. It’s usually clear when it wins out (all rules without the !important), but what about when it conflicts with inline styling? What whens there? With Firefox, a rule from an external stylsheet with “!important” will overule a style attribute.

  19. Pingback: CSS Specificity Wars // Jeriko One

  20. Pingback: And all that Malarkey

  21. Pingback: EstadoBeta » Archivo » Calculando la especificidad en CSS

  22. Pingback: a.css, esbudellant estĂ ndards » CĂ lcul de l’especificitat

  23. The following sentence

    “While it would be rare to have more than 10 individual selectors in a given category, base 10 doesn’t apply when there are more than 10 selectors present.”

    should probably be

    “While it would be rare to have more than 9 individual selectors in a given category, base 10 doesn’t apply when there are more than 9 selectors present.”

    Am I wrong?

  24. Pingback: The answers to the “Looking for a good interface developer?” questions - Robert’s talk

  25. Pingback: The Cascade: Part 2 (Finally!) - Lachy’s Log

  26. Pingback: Particletree » A Designer’s Guide to Prototyping Ajax

  27. Molly. It would be infinitely more useful/valuable if you gave example code for the subject you’re discussing. Any chance you could supply and example of correct png/jpg feeder code?

    Thanks. Love your contributions.

  28. Pingback: CSS Specificity Issues at ZeroBoot BLOG

  29. Pingback: Max Design - standards based web design, development and training » Some links for light reading (10/10/05)

  30. Pingback: CĂ lcul de l'especificitat - a.css, esbudellant estĂ ndards

  31. Pingback: Become a better Standardista | Muffin Research Labs by Stuart Colville

  32. yes this is the right way

  33. Pingback: CSS Specificity: Things You Should Know

  34. Pingback: CSS Specificity: Things You Should Know at Design Resources

  35. Pingback: FileIdeas.com» Blog Archive » CSS Specificity: Things You Should Know

  36. Pingback: CSS Specificity: Things You Should Know at Undocontrol

  37. As far as I can see… in reference to the person who mentioned CSS3… please refer to the CSS2.1 Specs at the WC3 site… last revision of the proposed specs is dated 19 Jul 2007. ‘CSS3’ is the proposal from 2001… just a note. (no flames please, thank you.)
    -the nut in the trees

  38. p has a specificity of 1 (1 HTML selector)
    div p has a specificity of 2 (2 HTML selectors; 1+1)
    .sith has a specificity of 10 (1 class selector)
    div p.sith has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
    #sith has a specificity of 100 (1 id selector)
    body #darkside .sith p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

  39. Pingback: CĂ lcul de l'especificitat - blog.esbudellat, esbudellant estĂ ndards

  40. Pingback: Yasar Gokcek - CSS Specificity: Things You Should Know

  41. Pingback: The Cascade, Specificity, and Inheritance / nguyen nam tien

  42. This is the latest and hottest ghd styler ever. If you need a ghd hair straighteners, this is a must buyghd hair straighteners,cheap ghd hair straighteners,pink ghd hair straightenersghd straightenersComme vous pouvez le voir, il s’agit d’une paire de chaussures shox classiquepink ghd hair straighteners . Si vous souhaitez poursuivre la mode, nike shox NZ sont votre meilleu…nike tnCette paire de Nike Shox Torch est chaud en maintenant la demande.nike chaussurestn chaussures

Upcoming Travels