Table of Contents
One thing beginning Web Designers and Developers often misunderstand or even leave out completely is CSS specificity hierarchy. This not so wise decision can cause them a lot of troubles alongside with few headaches later on. Let’s fix it or prevent it from happening at all today. We are going to talk a bit more about this subject – what it is, how does it work and why it is good to know about it.
Specificity hierarchy was introduced by the W3C and basically it is hierarchy of order in which are selectors used. Every selector has some value that due to which the browsers decides what rules should be followed first and what later. This is what can cause you troubles in your projects. When you define some rules and forget about specificity you then may encounter situation where these rules work in different way or they does not work at all. Just by knowing how specificity works, you can prevent these problems.
How does it work
In order to make it little bit easier, selectors and rules are grouped into four categories and each of this group has assigned special rank that allocates its value. Each and every selector belongs into one, and only one, of the four Groups. This then determines in what order are rules used. Group 1 has the highest rank or value and Group 4 the lowest. Selector with highest rank is the winner and is applied as first. Selector with lowest is loser and have to wait in line. In case when some selectors share an equal specificity value, the latest rule is the one that wins. If selectors have an unequal specificity value, the more specific rule is winner. From this you can deduce that rules for more specific selectors have a greater specificity and so are used first. Also, don’t forget the cascading order of stylesheets. The last defined rule will always override any previous rules. Embedded stylesheet has a greater specificity than other rules. Two important notes … The universal selector “*” has no specificity value at all and the any rule that uses “!important” value has the highest specificity and overrides any other conflicting rule. You can successfully override one rule with value “!important” only by defining another one with the “!important” value later.
The Groups are:
Group 1: inline styles
Example:
<h1 style="color: #a00;">Irure quibusdam</h1> <p style="color: #ddd;">Nam laborum exquisitaque, sunt o litteris in hic lorem laborum graviterque.</p>
Group 2: id attributes
#wrapper #form
Group 3: classes, pseudo-classes, other attributes
.nav {}
:hover
Group 4: elements, pseudo-elements
section ::after
To knowing the exact specificity you have to do some dirty math I do not want to bother you. Still, if you are interested in how the browser calculates the specificity for individual selector, I included a cheatsheet from W3C bellow:
A. Count if an element has an in-line style rule and apply the value 1,0,0,0 or A=1, B=0, C=0, D=0 or x,0,0,0.
B. Count the number of ID attributes in the selector and apply the value 0,1,0,0 for each or A=0, B=1, C=0, D=0 or 0,x,0,0.
C. Count the number of classes, pseudo-classes, and other attributes in the selector and apply the value 0,0,1,0 for each or A=0, B=0, C=1, D=0 or 0,0,x,0.
D. Count the number of element names and pseudo-elements in the selector and apply the value 0,0,0,1 for each or A=0, B=0, C=0, D=1 or 0,0,0,x.
Here is an example:
* /* a=0 b=0 c=0 -> specificity = 0 */ a /* a=0 b=0 c=1 -> specificity = 1 */ ul li /* a=0 b=0 c=2 -> specificity = 2 */ div h1+h2 /* a=0 b=0 c=3 -> specificity = 3 */ p + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ ul ol li.green /* a=0 b=1 c=3 -> specificity = 13 */ li.green.first /* a=0 b=2 c=1 -> specificity = 21 */ #wrapper /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
Summary
CSS specificity hierarchy can cause you some headaches while trying to understand it and learn it, but it is worth it. Knowing these rules and applying them can make your work easier and your code shorter and more readable.
More:
http://www.w3.org/TR/css3-selectors/#specificity http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
