Here's an example. The following produces a blue h2
<style>
div h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>
<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>
So we concluded that obviously id's take precedence over tags.
However, in this situation we end up with a red h2
<style>
#myDiv h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>
<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>
It turns out after a bit of searching that the algorithm is pretty simple. Here's what the w3c had to say:
A selector's specificity is calculated as follows:
- count the number of ID attributes in the selector (= a)
- count the number of other attributes and pseudo-classes in the selector (= b)
- count the number of element names in the selector (= c)
- ignore pseudo-elements.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
