{Carrer web log}


Blog about web design & development

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.

CSS  Specificity - Cheat Sheet

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:

Cheers!


14 Responses to “CSS Specificity - Cheat Sheet”

  1. // Anonymous 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. // Blogger 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. // Blogger 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. // Blogger 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. // Anonymous 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. // Anonymous 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. // Anonymous neo // 9/30/2009

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

  8. // Blogger 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. // Anonymous James // 10/04/2009

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

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

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

  11. // Blogger 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. // Blogger 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. // Blogger 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. // Blogger CJ // 5/25/2010

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

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License