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, write for Community MX, speak about web development on occasion, and have a full time job as Senior Web Developer for a small startup. I’ve been coding CSS, XHTML, JavaScript and PHP since 1999, tableless CSS since 2003. If you have any recommendations on topics for me to hit, please let me know via comments.

Comments