Background
Life is good when you have a small web project with limited and simple CSS but as your project size grows and more CSS is to be applied complexity increases.
In there are two or more conflicting CSS rules that point to the same element then your web browser will apply some rules to figure out which rule should be given higher precedence and be applied.
We term this rule weight as selectivity. More the selectivity more is the preference given to that rule.
Example
Enough of the theory lets see an example. Consider following html
<html>
<head>
<style type="text/css">
.redbutton{color: red;}
.bluebutton{color: blue;}
#innerdiv input {color: green;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
function changecolor()
{
jQuery("#colorbutton").addClass("bluebutton");
}
</script>
<title>Testing CSS Selectivity</title>
</head>
<body>
<div id="ouderdiv">
<div id ="innerdiv">
<input id="colorbutton" type="button" class="redbutton" value="Click Me" onclick="changecolor()"/>
<div>
<div>
</body>
</html>
What do you expect will be the color of the button on page load and on click ? Well think a bit and then try it out. Paste above html in a file and open it in any browser. Observer the color, click on the button and then observer the color again.
Before Cick
After Click
Whats happening?
Have questions? Will be answered soon. Lets take a step back and review our html code. We have a button. For this button we provided a class called redbutton (which should make the button red) and then on click we are dynamically changing the class to bluebutton (which should make the button blue). But none of these worked. It is still green. As you must have guessed correctly by now there is another css rule that is getting applied.
#innerdiv input {color: green;}
But why? Because CSS specificity of this rule is more than other class rules that we have defined. Next natural question - How is css specificity determined by the browser?
How is CSS specificity calculated?
There are some basic rules to determine specificity of a CSS rule.
Determination of specificity of a CSS rule depends on what type of selector is used
- HTML selector (Eg input) has specificity 1
- Class selector (Eg .redcolor) has specificity 10
- ID selector (Eg. #innerdiv) has specificity 100
And if you have multiple such selectors in an CSS rule then their individual specificity just get added to form rule specificity that is used by the browser to determine precedence.
Here are few example
- a - specificity 1 (1 HTML selector)
- div a - specificity 2 (2 HTML selectors, 1+1)
- div .someclass - specificty 11 (1 HTML selector and 1 class selector, 1 + 10)
- div #someid - specificity 101 (1 HTML selector and 1 id selector, 1 + 100)
- div #someid .someclass - specificity 111 (1 HTML selector and 1 id selector and 1 class selector, 1 + 100 + 10)
and so on.... Hope you got the point.
Note : If two conflicting rules have same selectivity then the one applied or parsed later is picked up.
So lets apply it to our rules.
- .redbutton{color: red;} - specificity 10 (1 class selector)
- .bluebutton{color: blue;} - specificity 10 (1 class selector)
- #innerdiv input {color: green;} - specificity 101 (1 id selector and 1 html selector, 100+1)
So how can we leverage this information now? Lets increase the specificity of first two color rules now.
- #innerdiv .redbutton{color: red;} - specificity 110 (1 id selector and 1 class selector,100+10)
- #innerdiv .bluebutton{color: blue;} - specificity 110 (1 id selector and 1 class selector,100+10)
- #innerdiv input {color: green;} - specificity 100 (1 id selector and 1 html selector,100+1)
With above rules now test our page again.
Before Click
After Click
That's all with CSS selectivity. Ideal scenario is when no two rules conflict but in my personal experience conflicting rules are bound to happen for a big web project. This is when this rules come handle. Let me know if you still have any questions :).
