CSS Specificity By Manu Goel

Contents CSS Specificity Exercise 1 Answer General Priority Specificity Hierarchy Calculating Specificity Excercise 1 (Revisited)

CSS Specificity

Exercise 1

Answer

General Priority

Specificity Hierarchy

Calculating Specificity

Excercise 1 (Revisited)

Contents The Trump Card Conclusion References & Worthy Readings Thank You

The Trump Card

Conclusion

References & Worthy Readings

Thank You

CSS Specificity Specificity determines, which CSS rule is applied by the browsers

Specificity determines, which CSS rule is applied by the browsers

Excercise 1 Anchor with class “spl” will be green or red? <style> ul#blogroll a { color: red; } a.spl { color: green; } </style> <ul id=&quot;blogroll&quot;> <li><a href=&quot;b1.html&quot;>Blog 1</a></li> <li><a href=&quot;b2.html&quot;>Blog 2</a></li> <li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li> <li><a href=&quot;b4.html&quot;>Blog 4</a></li> </ul>

Anchor with class “spl” will be green or red?

<style>

ul#blogroll a { color: red; }

a.spl { color: green; }

</style>

<ul id=&quot;blogroll&quot;>

<li><a href=&quot;b1.html&quot;>Blog 1</a></li>

<li><a href=&quot;b2.html&quot;>Blog 2</a></li>

<li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li>

<li><a href=&quot;b4.html&quot;>Blog 4</a></li>

</ul>

Answer RED

RED

General Priority User Stylesheet Author Stylesheet Inline CSS declaration using STYLE attribute Internal CSS, inside STYLE tags External CSS file

User Stylesheet

Author Stylesheet

Inline CSS declaration using STYLE attribute

Internal CSS, inside STYLE tags

External CSS file

Specificity Hierarchy pre, :before, :after, :first-line, etc .class, [attribute], :active, :focus, etc #whatever style=“color: blue;” color: blue !important; Example 1 Elements, pseudo-elements 10 Classes, attributes, pseudo-classes 100 IDs 1000 Inline styles n/a (Highest) !important Specificity Category

Calculating Specificity element selector (1) Sith power (specificity): 0, 0, 1 class selector (10) Sith power (specificity): 0, 1, 0 id selector (100) Sith power (specificity): 1, 0, 0

Excercise 1 (Revisited) <style> ul#blogroll a { color: red; } Specificity : 1,0,2 a.spl { color: green; } Specificity : 0,1,1 </style> <ul id=&quot;blogroll&quot;> <li><a href=&quot;b1.html&quot;>Blog 1</a></li> <li><a href=&quot;b2.html&quot;>Blog 2</a></li> <li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li> <li><a href=&quot;b4.html&quot;>Blog 4</a></li> </ul>

<style>

ul#blogroll a { color: red; } Specificity : 1,0,2

a.spl { color: green; } Specificity : 0,1,1

</style>

<ul id=&quot;blogroll&quot;>

<li><a href=&quot;b1.html&quot;>Blog 1</a></li>

<li><a href=&quot;b2.html&quot;>Blog 2</a></li>

<li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li>

<li><a href=&quot;b4.html&quot;>Blog 4</a></li>

</ul>

The Trump Card !important is not the solution to specificity woes This shortcut can lead to really messed up CSS in big projects

!important is not the solution to specificity woes

This shortcut can lead to really messed up CSS in big projects

Conclusion Minimize use of !important [ Understanding Specificity , Selector Specificity ] Use id to make a rule more specific Minimize the number of selectors [ Understanding Specificity ]

Minimize use of !important [ Understanding Specificity , Selector Specificity ]

Use id to make a rule more specific

Minimize the number of selectors [ Understanding Specificity ]

Conclusion Use the least specific selector combination required to style an element Use LVHA for link styling link-visited-hover-active [ Link Specificity ] If in confusion use [ CSS specificity calculator ]

Use the least specific selector combination required to style an element

Use LVHA for link styling link-visited-hover-active [ Link Specificity ]

If in confusion use [ CSS specificity calculator ]

References & Worthy Readings http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/ http://juicystudio.com/article/selector-specificity.php http://www.htmldog.com/guides/cssadvanced/specificity/ http://meyerweb.com/eric/css/link-specificity.html http://www.w3.org/TR/REC-CSS2/cascade.html#specificity http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css http://iamacamera.org/default.aspx?id=95 http://www.rebelinblue.com/specificity.php http://www.brunildo.org/test/IEASpec.html

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

http://juicystudio.com/article/selector-specificity.php

http://www.htmldog.com/guides/cssadvanced/specificity/

http://meyerweb.com/eric/css/link-specificity.html

http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

http://iamacamera.org/default.aspx?id=95

http://www.rebelinblue.com/specificity.php

http://www.brunildo.org/test/IEASpec.html

Thank You

Thank You