HTML and CSS Reference
In-Depth Information
Selectors inside the negation pseudo-class are counted like any
OTHERBUTTHENEGATIONITSELFDOESNOTCOUNTASAPSEUDOCLASS
Concatenating the three numbers a-b-c (in a number system with
a large base) gives the specificity.
You might have gotten lost somewhere around “in a number system
with a large base,” and I wouldn't blame you. Looking at a few examples
should clear things up:
#user { color: rgb(1,1,1); } /* a=1 b=0 c=0 */
#user:first-child { color: rgb(2,2,2); } /* a=1 b=1 c=0 */
div div+div div div+div div div div>div div div:first-child {
color: rgb(3,3,3);
} /* a=0 b=0 c=13 */
div.foo { color: rgb(4,4,4); } /* a=0 b=1 c=1 */
.foo .foo+.foo .foo+.foo .foo .foo .foo .foo>.foo .foo
➥
.foo:first-child {
color: rgb(5,5,5);
} /* a=0 b=12 c=1 */
.foo.bar { color: rgb(6,6,6); } /* a=0 b=2 c=0 */
[id=”user”] { color: rgb(7,7,7); } /* a=0 b=1 c=0 */
If all these selectors matched the same element in a complex HTML
document, the text in that element would be the color
rgb(2,2,2)
.
Though some of the selectors, particularly the third and fourth, are
more verbose then others, the second is considered the one with the
greatest specificity.
The bit about concatenating the number in a non-decimal-based number
system is a reminder that when combining the results, you need to
compare them as buckets. For example, compare [1][1][0] vs. [0][12][1]
instead of 110 vs. 121.
