CSS Specificity By Manu Goel
Contents <ul><li>CSS Specificity </li></ul><ul><li>Exercise 1 </li></ul><ul><li>Answer </li></ul><ul><li>General Priority ...
Contents <ul><li>The Trump Card </li></ul><ul><li>Conclusion </li></ul><ul><li>References & Worthy Readings </li></ul><ul>...
CSS Specificity <ul><li>Specificity  determines, which CSS rule is applied  by the browsers </li></ul>
Excercise 1 <ul><li>Anchor with class “spl” will be green or red? </li></ul><ul><li><style> </li></ul><ul><li>ul#blogroll ...
Answer <ul><li>RED </li></ul>
General Priority <ul><li>User Stylesheet </li></ul><ul><li>Author Stylesheet </li></ul><ul><ul><li>Inline CSS declaration ...
Specificity Hierarchy pre, :before, :after, :first-line, etc .class, [attribute], :active, :focus, etc #whatever style=“co...
Calculating Specificity element selector (1) Sith power (specificity): 0, 0, 1 class selector (10) Sith power (specificity...
 
Excercise 1 (Revisited) <ul><li><style> </li></ul><ul><li>ul#blogroll a { color: red; }  Specificity : 1,0,2 </li></ul><ul...
The Trump Card <ul><li>!important  is not the solution to specificity woes </li></ul><ul><li>This shortcut can lead to rea...
Conclusion <ul><li>Minimize use of !important [ Understanding Specificity ,  Selector Specificity ] </li></ul><ul><li>Use ...
Conclusion <ul><li>Use the least specific selector combination required to style an element </li></ul><ul><li>Use LVHA for...
References & Worthy Readings <ul><li>http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ </...
<ul><li>Thank You </li></ul>
Upcoming SlideShare
Loading in...5
×

Css Specificity

6,259

Published on

A presentation with a brief overview about CSS Specificity and how to go about calculating it by myself, with a long list of references

Published in: Technology, Education
5 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,259
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
112
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

Css Specificity

  1. 1. CSS Specificity By Manu Goel
  2. 2. Contents <ul><li>CSS Specificity </li></ul><ul><li>Exercise 1 </li></ul><ul><li>Answer </li></ul><ul><li>General Priority </li></ul><ul><li>Specificity Hierarchy </li></ul><ul><li>Calculating Specificity </li></ul><ul><li>Excercise 1 (Revisited) </li></ul>
  3. 3. Contents <ul><li>The Trump Card </li></ul><ul><li>Conclusion </li></ul><ul><li>References & Worthy Readings </li></ul><ul><li>Thank You </li></ul>
  4. 4. CSS Specificity <ul><li>Specificity determines, which CSS rule is applied by the browsers </li></ul>
  5. 5. Excercise 1 <ul><li>Anchor with class “spl” will be green or red? </li></ul><ul><li><style> </li></ul><ul><li>ul#blogroll a { color: red; } </li></ul><ul><li>a.spl { color: green; } </li></ul><ul><li></style> </li></ul><ul><li><ul id=&quot;blogroll&quot;> </li></ul><ul><li><li><a href=&quot;b1.html&quot;>Blog 1</a></li> </li></ul><ul><li><li><a href=&quot;b2.html&quot;>Blog 2</a></li> </li></ul><ul><li><li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li> </li></ul><ul><li><li><a href=&quot;b4.html&quot;>Blog 4</a></li> </li></ul><ul><li></ul> </li></ul>
  6. 6. Answer <ul><li>RED </li></ul>
  7. 7. General Priority <ul><li>User Stylesheet </li></ul><ul><li>Author Stylesheet </li></ul><ul><ul><li>Inline CSS declaration using STYLE attribute </li></ul></ul><ul><ul><li>Internal CSS, inside STYLE tags </li></ul></ul><ul><ul><li>External CSS file </li></ul></ul>
  8. 8. 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
  9. 9. 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
  10. 11. Excercise 1 (Revisited) <ul><li><style> </li></ul><ul><li>ul#blogroll a { color: red; } Specificity : 1,0,2 </li></ul><ul><li>a.spl { color: green; } Specificity : 0,1,1 </li></ul><ul><li></style> </li></ul><ul><li><ul id=&quot;blogroll&quot;> </li></ul><ul><li><li><a href=&quot;b1.html&quot;>Blog 1</a></li> </li></ul><ul><li><li><a href=&quot;b2.html&quot;>Blog 2</a></li> </li></ul><ul><li><li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li> </li></ul><ul><li><li><a href=&quot;b4.html&quot;>Blog 4</a></li> </li></ul><ul><li></ul> </li></ul>
  11. 12. The Trump Card <ul><li>!important is not the solution to specificity woes </li></ul><ul><li>This shortcut can lead to really messed up CSS in big projects </li></ul>
  12. 13. Conclusion <ul><li>Minimize use of !important [ Understanding Specificity , Selector Specificity ] </li></ul><ul><li>Use id to make a rule more specific </li></ul><ul><li>Minimize the number of selectors [ Understanding Specificity ] </li></ul>
  13. 14. Conclusion <ul><li>Use the least specific selector combination required to style an element </li></ul><ul><li>Use LVHA for link styling link-visited-hover-active [ Link Specificity ] </li></ul><ul><li>If in confusion use [ CSS specificity calculator ] </li></ul>
  14. 15. References & Worthy Readings <ul><li>http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ </li></ul><ul><li>http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html </li></ul><ul><li>http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/ </li></ul><ul><li>http://juicystudio.com/article/selector-specificity.php </li></ul><ul><li>http://www.htmldog.com/guides/cssadvanced/specificity/ </li></ul><ul><li>http://meyerweb.com/eric/css/link-specificity.html </li></ul><ul><li>http://www.w3.org/TR/REC-CSS2/cascade.html#specificity </li></ul><ul><li>http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css </li></ul><ul><li>http://iamacamera.org/default.aspx?id=95 </li></ul><ul><li>http://www.rebelinblue.com/specificity.php </li></ul><ul><li>http://www.brunildo.org/test/IEASpec.html </li></ul>
  15. 16. <ul><li>Thank You </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×