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:   standards, web design and development
Posted by:   Molly | 11:37 pm |

55 Responses to “CSS2 and CSS2.1 Specificity Clarified”

  1. Malarkey Says:

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

  2. jontan Says:

    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. Rimantas Says:

    This whole issue was much of the fun :)

  4. kk-works.de » CSS Spezifität Says:

    […] ktüre zusammengestellt. Lektüre Eric Meyer W3C Spezifikation Molly Holzschlag html dog Selfhtml CSS 4 You Jens Meiert […]

  5. Specificity wars - Molly vs. Andy - Wait till I come! Says:

    […] star wars based, wonderful cheatsheet on the subject which initially had some errors that Molly rectified. Wonderful stuff and something to hang up in the office. […]

  6. Jeff Croft Says:

    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! :)

  7. Matt Robin Says:

    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.

  8. Vittorio Barzaghi Says:

    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

  9. Matt Robin Says:

    Vittorio: You can make CSS visually appear the same as a Framed site by using ‘Fixed’ values instead of float.

  10. HeroreV Says:

    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.

  11. ThatchSpace » CSS: Specificity Wars Says:

    […] t first. Truly glorious, and if you aren’t a Star Wars fan, try the Molly link. It’s a tad saner.

    […]

  12. Dave Ferrick Says:

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

  13. Dustin Diaz Says:

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

  14. torresburriel.com » Lecturas sobre hojas de estilo y est�ndares web - 10/10/05 Says:

    […] DOM" CSS Swag: Multi-Column Lists Internet Explorer and the Expanding Box Problem CSS2 and CSS2.1 Specificity Clarified CSS: Specificity Wars MaintainableC […]

  15. Tip(z) » CSS och “vikt” Says:

    […] na inte visas som man vill. Det kan bero på “vikten”. Hur förklarar man den? Molly Holzschlag har gjort ett inlägg, Malarkey har läst och gör sin ege […]

  16. MH Says:

    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

  17. MH Says:

    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.

  18. Confluence: Application Development Says:

    WSG Announcements 10 October 05

    Derek Featherstone has posted his accessibility presentation from WE05 at a new site Simply Accessible

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

    […] CSS2 and CSS2.1 Specificity Clarified […]

  20. John Says:

    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.

  21. Kate Says:

    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.

  22. CSS Specificity Wars // Jeriko One Says:

    […] W3C CSS - Specificity - HTML Dog Juicy Studio: Selector Specificity HTML Help: CSS Structure and Rules Molly: CSS2 and CSS2.1 specificity clarified Meyerweb: Link Specificity […]

  23. And all that Malarkey Says:

    CSS: Specificity Wars

    Join me, and together we can rule the galaxy as father and geeks!

  24. EstadoBeta » Archivo » Calculando la especificidad en CSS Says:

    […] All That Malarkey tiene un excelente -y divertido- artículo donde compara el poder de los selectores con los personajes de Star Wars (el selector de elemento es un Stormtrooper, el de clase es Darth Vader y el de id, el Emperador). Además tiene una ficha donde las figuras del Lado Oscuro de la Fuerza nos ilustran los detalles de la cascada CSS. Pueden encontrar más información en HTML Dog, en el Blog de Molly y por supuesto en la W3C para los duros de estómago. […]

  25. a.css, esbudellant estàndards » Càlcul de l’especificitat Says:

    […] CSS2 and CSS2.1 Specificity Clarified […]

  26. Alexei Says:

    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?

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

    […] Many people have tried taking a stab at explaining this, but I think Molly got closest to the truth (while maintaining a state of being understandable) in CSS2 and CSS2.1 Specificity Clarified. CSS specificity, boys and girls, is where CSS goes from nice fonts and cool layouts to rocket science. […]

  28. The Cascade: Part 2 (Finally!) - Lachy’s Log Says:

    […] Step 3 of the cascade then says to sort the rules with the same importance and origin by the specificity of the selector. The details of calculating the specificity is out of scope for this article, but it has been covered by others. See Andy Clarke’s Specificity Wars and Molly Holzschlag’s CSS2 and CSS2.1 Specificity Clarified. […]

  29. Particletree » A Designer’s Guide to Prototyping Ajax Says:

    […] For more information, check out what Eric and Molly have to say about specificity. […]

  30. Brent Says:

    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.

  31. CSS Specificity Issues at ZeroBoot BLOG Says:

    […] CSS2 and CSS2.1 Specificity Clarified Filed under: CSS   |       […]

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

    […] CSS2 and CSS2.1 Specificity Clarified […]

  33. Càlcul de l'especificitat - a.css, esbudellant estàndards Says:

    […] CSS2 and CSS2.1 Specificity Clarified […]

  34. Become a better Standardista | Muffin Research Labs by Stuart Colville Says:

    […] Another bad habit is to use in-line styles to add styling as you code. This nasty habit is pure laziness, inline styles have the highest specificity of all (1,0,0,1) so using inline styles will dominate any styling you write for the same element in an external stylesheet. In addition the whole reason we use CSS is separation of presentation from mark-up so inline styles make no sense. […]

  35. Touristikblog Says:

    yes this is the right way

  36. CSS Specificity: Things You Should Know Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  37. lost node » Blog Archive » CSS Specificity: Things You Should Know Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  38. CSS Specificity: Things You Should Know at Design Resources Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  39. FileIdeas.com» Blog Archive » CSS Specificity: Things You Should Know Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  40. CSS Specificity: Things You Should Know at Undocontrol Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  41. mtsqph Says:

    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

  42. güzel sözler Says:

    Thanks

  43. mIRC Says:

    thanx a lot

  44. Recursos y Tutoriales » Blog Archive » Limpiar el codigo innecesario de CSS Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  45. firefox indir Says:

    thanks

  46. mırc Says:

    its very nice website, its cool thnx

  47. santosh kori Says:

    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)

  48. Càlcul de l'especificitat - blog.esbudellat, esbudellant estàndards Says:

    […] CSS2 and CSS2.1 Specificity Clarified […]

  49. iyiegitim Says:

    thanks

  50. Yasar Gokcek - CSS Specificity: Things You Should Know Says:

    […] The universal selector has a specificity of 0, 0, 0, 0. *, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0. [CSS Specificity Clarified] […]

  51. The Cascade, Specificity, and Inheritance / nguyen nam tien Says:

    […] References: http://reference.sitepoint.com/css/inheritancecascade http://www.w3.org/TR/CSS21/cascade.html http://molly.com/2005/10/06/css2-and-css21-specificity-clarified/ Molly E. Holzschlag - CSS Ref Card, Part 1 CSS Mastery - Andy Budd CSS Pocket Reference - Eric Meyer - O’reilly […]

  52. Egitim Says:

    thanks molly..

  53. Chat Says:

    Great..

  54. Blog Says:

    Oh.. good!

  55. Driver Says:

    thanks

Leave a Reply

Upcoming Activities

Roll Roll Roll