Css Specificity
Upcoming SlideShare
Loading in...5
×
 

Css Specificity

on

  • 8,164 views

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

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

Statistics

Views

Total Views
8,164
Views on SlideShare
7,988
Embed Views
176

Actions

Likes
10
Downloads
106
Comments
5

8 Embeds 176

http://mycourses.tstc.edu 147
http://www.slideshare.net 19
http://www.linkedin.com 3
http://moodlearchives.tstc.edu 2
http://tstc-sandbox.mrooms.net 2
https://twitter.com 1
https://www.linkedin.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css Specificity Css Specificity Presentation Transcript

  • CSS Specificity By Manu Goel
  • Contents
    • CSS Specificity
    • Exercise 1
    • Answer
    • General Priority
    • Specificity Hierarchy
    • Calculating Specificity
    • Excercise 1 (Revisited)
  • Contents
    • The Trump Card
    • Conclusion
    • References & Worthy Readings
    • Thank You
  • CSS Specificity
    • 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>
  • Answer
    • RED
  • General Priority
    • 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>
  • The Trump Card
    • !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 ]
  • 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 ]
  • 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
    • Thank You