Standardista

CSS3, JavaScript and HTML5 explained

SpeciFISHity: CSS Specificity

Posted By on January 8, 2012

Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity.

X-0-0: The number of ID selectors, represented by Sharks
0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish
0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob
*: The universal selector has no value

Download the specificity chart and read the rest of the SpeciFISHity article here


About The Author

My name is Estelle Weyl. I am a consulting web developer, am writing some books with O'Reilly, run frontend workshop,s and speak about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via comments. If you want

Comments