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 | 11:37 pm |
October 7th, 2005 at 12:28 am
I’ve updated my Sith Power examples. Thanks for the clarification. That’s why I am still the pupil!
October 7th, 2005 at 1:18 am
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
October 7th, 2005 at 1:29 am
This whole issue was much of the fun
October 7th, 2005 at 3:02 am
[…] ktüre zusammengestellt. Lektüre Eric Meyer W3C Spezifikation Molly Holzschlag html dog Selfhtml CSS 4 You Jens Meiert […]
October 7th, 2005 at 7:44 am
[…] 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. […]
October 7th, 2005 at 8:04 am
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!
October 7th, 2005 at 6:00 pm
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.
October 7th, 2005 at 11:52 pm
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
October 8th, 2005 at 8:17 am
Vittorio: You can make CSS visually appear the same as a Framed site by using ‘Fixed’ values instead of float.
October 8th, 2005 at 11:39 am
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.
October 9th, 2005 at 3:55 pm
[…] t first. Truly glorious, and if you aren’t a Star Wars fan, try the Molly link. It’s a tad saner.
[…]
October 9th, 2005 at 11:53 pm
No! It’s not true!
It’s impossible.
October 10th, 2005 at 9:56 am
Damn. and I had already printed it out for reference for office newbs. Thanks Malarky for the update
October 10th, 2005 at 3:29 pm
[…] DOM" CSS Swag: Multi-Column Lists Internet Explorer and the Expanding Box Problem CSS2 and CSS2.1 Specificity Clarified CSS: Specificity Wars MaintainableC […]
October 17th, 2005 at 5:44 am
[…] 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 […]
October 21st, 2005 at 9:09 am
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
October 21st, 2005 at 9:14 am
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.
November 9th, 2005 at 7:40 am
WSG Announcements 10 October 05
Derek Featherstone has posted his accessibility presentation from WE05 at a new site Simply Accessible
January 1st, 2006 at 2:14 pm
[…] CSS2 and CSS2.1 Specificity Clarified […]
January 6th, 2006 at 7:13 am
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.
January 20th, 2006 at 12:00 am
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.
July 27th, 2006 at 12:07 pm
[…] 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 […]
July 30th, 2006 at 6:46 pm
CSS: Specificity Wars
Join me, and together we can rule the galaxy as father and geeks!
August 23rd, 2006 at 3:12 pm
[…] 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. […]
August 29th, 2006 at 12:31 pm
[…] CSS2 and CSS2.1 Specificity Clarified […]
October 1st, 2006 at 12:15 pm
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?
October 17th, 2006 at 7:39 pm
[…] 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. […]
October 26th, 2006 at 12:45 pm
[…] 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. […]
October 30th, 2006 at 7:37 pm
[…] For more information, check out what Eric and Molly have to say about specificity. […]
November 12th, 2006 at 9:43 am
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.
November 13th, 2006 at 11:02 pm
[…] CSS2 and CSS2.1 Specificity Clarified Filed under: CSS | […]
November 19th, 2006 at 2:20 am
[…] CSS2 and CSS2.1 Specificity Clarified […]
February 26th, 2007 at 10:47 pm
[…] CSS2 and CSS2.1 Specificity Clarified […]
April 9th, 2007 at 2:33 am
[…] 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. […]
April 23rd, 2007 at 9:08 am
yes this is the right way
July 26th, 2007 at 2:47 pm
[…] 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] […]
July 26th, 2007 at 5:03 pm
[…] 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] […]
July 27th, 2007 at 5:35 am
[…] 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] […]
August 9th, 2007 at 7:08 am
[…] 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] […]
August 31st, 2007 at 1:33 pm
[…] 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] […]
October 22nd, 2007 at 7:20 am
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
January 12th, 2008 at 11:33 am
Thanks
February 3rd, 2008 at 3:46 am
thanx a lot
March 3rd, 2008 at 2:56 am
[…] 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] […]
March 30th, 2008 at 6:32 am
thanks
April 5th, 2008 at 4:29 am
its very nice website, its cool thnx
April 23rd, 2008 at 12:21 am
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)
May 25th, 2008 at 9:46 am
[…] CSS2 and CSS2.1 Specificity Clarified […]
August 14th, 2008 at 4:59 pm
thanks
September 27th, 2008 at 6:09 am
[…] 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] […]
October 13th, 2008 at 11:32 pm
[…] 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 […]
October 17th, 2008 at 1:25 pm
thanks molly..
October 17th, 2008 at 1:27 pm
Great..
October 17th, 2008 at 1:33 pm
Oh.. good!
November 2nd, 2008 at 4:41 am
thanks