{Carrer web log} ←

CSS Specificity - Cheat Sheet

Tuesday, September 29, 2009 { 14 Comments }

One of most common difficulties with CSS is determining what CSS rule will be applied on the page. That was my nightmare when I started with CSS.

But actually is not so hard to understand how these rules are applied and the order of CSS Specificity.

I created CSS Cheat Sheet that I hope it can help you understand CSS Specificity better.



Download:

CSS Specificity - Cheat Sheet(.png)

CSS Specificity - Cheat Sheet(.pdf)

CSS Specificity - Cheat Sheet(.xls)

CSS Specificity - Cheat Sheet(.ods)


There are many articles talking about this issue, here are some:

• Calculating a selector's specificity


• CSS Specificity: Things You Should Know


• CSS: Specificity Wars


• Everything You Need To Know About CSS Selector Specificity


• Link Specificity


• Specificity | HTML Dog


• Understanding Specificity

Cheers!

14 Responses to “CSS Specificity - Cheat Sheet”

1. //  Martin Michálek // 9/29/2009

   Hi Vladimir,
   
   thanks for cheatsheet.
   
   I think that your result values format is not right and misleading.
   
   You can better use "1,0,0,0" than "1000" for inline style for example.
   
   "Decimal format" (1000) looks like inline style has the same value as ten id selectors (01000) but it is not true:
   
   http://www.vzhurudolu.cz/test/specificity.html  

2. //  Vladimir // 9/29/2009

   @Martin: You are absolutely right about the format 1,0,0,0. Your example clearly shows the point. But I personally think that the mathematical count is more clear, 1,0,0,0 is more correct but 1000 is more easy to understand. At the beginning I had problems understanding the 1,0,1,0 format it looked like some binary format :)  

3. //  Chris // 9/29/2009

   A little confusing at first... but eventually got it.
   
   Inline = 1000 points
   id = 100 points
   class = 10 points
   element = 1 point
   
   And then you just give some examples, got it. Didn't really understand why you have the "a b c d" row...  

4. //  Vladimir // 9/29/2009

   @Chris: Yes, the logic is simple :)
   I have a,b,c,d to be compatible with official documentation http://www.w3.org/TR/CSS2/cascade.html#specificity  

5. //  Caleb // 9/29/2009

   On the example "a.link" how is this 2 and not 11? 10 for the class and 1 for the element name.  

6. //  neo // 9/30/2009

   Hi caleb, I guess that's not "a.link" , and it should be "a:link" and also "a:active" "a.visited" are got 2 points ...  

7. //  neo // 9/30/2009

   Hi Vladimir, Thats not a.link, its "a:link" , Plz update that ...  

8. //  Vladimir // 9/30/2009

   @Caleb & @Neo: Thank you for correcting the typo! a:link is 1,1 or 11, :link = 10 because is pseudo-class.
   Post updated!  

9. //  James // 10/04/2009

   Also worth mentioning is the "!important" rule wich will override all the above declaration types  

10. //  Bjarni Wark // 10/06/2009

    Thanks for that, good to have a "hardcopy" for the desktop.  

11. //  Lichtathlet | // 10/06/2009

    Wby so complicated?
    It's easy to remember:
    class > id > important > style
    
    that means: id overwrites class,
    important overwrites class and id and so on...  

12. //  Michael // 1/28/2010

    Sorry Vladimir
    
    I stared at your cheatsheet for some time, but i have absolutely no idea what it´s about. Perhaps a bit more explatantion?  

13. //  Vladimir // 1/28/2010

    @Michael: It is all about what style should be applied on the page if you have something like inside head style tag #hello {color:green} .hi {color:blue} and HTML < div id="hello" class="hi" style="color:red;" > Text text text < /div >.
    
    Which color will the Text be? The color inside stile="" or red. Because style is most "specific".  

14. //  CJ // 5/25/2010

    Thanks for informative article. This can be very useful with php tutorial.  

Post a Comment

<< Home