Understanding Specificity

Recently, i started going thorugh few css tutorials as i am facing lot of design issues in my project. While going through css tutorials i came across the concept of specificity which is very interesting and simple. Till the time i don't know specificity i use to play around with firebug and modify all the styles for N times to get a particular style fixed. Now i know how specificity works and hence i can debug the issue fast.

Basically, when multiple styles are defined on a particular element, then the concept of specificity comes into picture. The specificity is a simple 4 digit number which identifies which particular style to be applied.

The specificity contains a 4 digit value with each digit separated by comma. #,#,#,#

Starting from right, The 1st digit stands for the number of element descriptors. If you had given style for 1 then the specificity value is (0,0,0,1). For example

/*The specificity of below li is 0,0,0,1*/
li {background-color:red;
list-style-type:square;
font-style:italic;
}

Similarly if you had styled like (body li {background-color:red}, then the specificity value is 0,0,0,2. When these 2 styles come in the same css, then the higher the specificity values wins and that particular style applied. IT means that the red color backgorund will be applied, bcoz it is more specific than only li.

The 2nd digit form right stands for number of classes defined

The 3rd digit from right stands for number of ids defined

The 4th digit from right stands for inline styles. Hence inline styles will overwrite only conflicting styles. The other styles defined to that element will still be valid

Here are few more styles with specificity values

/*The specificity of below li is 0,0,0,1 because only 1 element descriptor is present*/
li {background-color:red;
list-style-type:square;
font-style:italic;
}

/* The specificity of below style is 0,0,0,2 because 2 element descriptors are present i.e. body and li */
body li {background-color:red;
list-style-type:square;
border:1px solid yellow;
}

/* The specificity of below one is 0,1,1,1 because content is a id and hence 1 mentioned in 2nd digit place, 1 class present hence 1 mentioned in 3rd digit place and 1 element i.e. li and hence 1 in 4th digit place */
#content li.third {background-color:green;
list-style-type:circle;
}

/* The specificity of below one is 0,0,1,3 because the there are 3 element descriptors body, ol and li and 1 class*/
body ol li.third {background-color:purple;
list-style-type:square;
}

/* The specificity of below one is 0,0,1,1 because 1 class and 1 element descriptor is present */
li.third {background-color:yellow;
list-style-type:square;
}

BUT Remember only when more than 1 style applied, then only specificity comes. Otherwise, it won't. For example, if li contains other styles such as font-size, font-style which are not present in body li or any other style of li, then those styles will get applied as there is no conflict.

I hope my small explanation of specificity will help you in understanding and fixing design issues.