![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](https://image.slidesharecdn.com/css-specificity-1214420221109607-9/85/Css-Specificity-8-320.jpg)
![Conclusion Minimize use of !important [ Understanding Specificity , Selector Specificity ] Use id to make a rule more specific Minimize the number of selectors [ Understanding Specificity ]](https://image.slidesharecdn.com/css-specificity-1214420221109607-9/85/Css-Specificity-13-320.jpg)
![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 ]](https://image.slidesharecdn.com/css-specificity-1214420221109607-9/85/Css-Specificity-14-320.jpg)
Css Specificity
- 1. CSS Specificity By Manu Goel
- 2. Contents CSS Specificity Exercise 1 Answer General Priority Specificity Hierarchy Calculating Specificity Excercise 1 (Revisited)
- 3. Contents The Trump Card Conclusion References & Worthy Readings Thank You
- 4. CSS Specificity Specificity determines, which CSS rule is applied by the browsers
- 5. Excercise 1 Anchor with class “spl” will be green or red? <style> ul#blogroll a { color: red; } a.spl { color: green; } </style> <ul id="blogroll"> <li><a href="b1.html">Blog 1</a></li> <li><a href="b2.html">Blog 2</a></li> <li><a href="b3.html" class="spl">Blog 3</a></li> <li><a href="b4.html">Blog 4</a></li> </ul>
- 6. Answer RED
- 7. General Priority User Stylesheet Author Stylesheet Inline CSS declaration using STYLE attribute Internal CSS, inside STYLE tags External CSS file
- 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. 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
- 11. Excercise 1 (Revisited) <style> ul#blogroll a { color: red; } Specificity : 1,0,2 a.spl { color: green; } Specificity : 0,1,1 </style> <ul id="blogroll"> <li><a href="b1.html">Blog 1</a></li> <li><a href="b2.html">Blog 2</a></li> <li><a href="b3.html" class="spl">Blog 3</a></li> <li><a href="b4.html">Blog 4</a></li> </ul>
- 12. The Trump Card !important is not the solution to specificity woes This shortcut can lead to really messed up CSS in big projects
- 13. Conclusion Minimize use of !important [ Understanding Specificity , Selector Specificity ] Use id to make a rule more specific Minimize the number of selectors [ Understanding Specificity ]
- 14. 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 ]
- 15. 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
- 16. Thank You