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, 1p.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 of1, 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 | 23:37 | Comments (45)
I’ve updated my Sith Power examples. Thanks for the clarification. That’s why I am still the pupil!
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
This whole issue was much of the fun
[...] 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. [...]
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!
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.
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
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.
[...] t first. Truly glorious, and if you aren’t a Star Wars fan, try the Molly link. It’s a tad saner.
[...]
No! It’s not true!
It’s impossible.
Damn. and I had already printed it out for reference for office newbs. Thanks Malarky for the update
[...] DOM" CSS Swag: Multi-Column Lists Internet Explorer and the Expanding Box Problem CSS2 and CSS2.1 Specificity Clarified CSS: Specificity Wars MaintainableC [...]
[...] 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 [...]
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
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.
WSG Announcements 10 October 05
Derek Featherstone has posted his accessibility presentation from WE05 at a new site Simply Accessible
[...] CSS2 and CSS2.1 Specificity Clarified [...]
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.
[...] 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 [...]
CSS: Specificity Wars
Join me, and together we can rule the galaxy as father and geeks!
[...] 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. [...]
[...] CSS2 and CSS2.1 Specificity Clarified [...]
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?
[...] 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. [...]
[...] 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. [...]
[...] For more information, check out what Eric and Molly have to say about specificity. [...]
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.
[...] CSS2 and CSS2.1 Specificity Clarified Filed under: CSS | [...]
[...] CSS2 and CSS2.1 Specificity Clarified [...]
[...] CSS2 and CSS2.1 Specificity Clarified [...]
[...] 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. [...]
yes this is the right way
[...] 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] [...]
[...] 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] [...]
[...] 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] [...]
[...] 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] [...]
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
thanx a lot
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)
[...] CSS2 and CSS2.1 Specificity Clarified [...]
thanks
[...] 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] [...]
[...] 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 [...]
Great..
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