CSS Specificity
Alessia S. Fitz Gibbon
INFO 340
In these slides...
-
Determining selector specificity
Specificity
If two rules "conflict" (they specify different values for the same property), then the more specific rule wins.
If two rules are equally specific, the later rule wins.
Class selectors are more specific than tag selectors.
p { /* tag selector, less specific */
color: blue;
}
.husky { /* class selector, more specific */
color: purple;
}<p class="husky">
This paragraph will be purple because the class
selector is more specifc, so overrides the other.
</p>
Specificity: a three-item "Tuple" of Counts
- The number of ID selectors
- The number class, attribute, and pseudo-class selectors
- The number of type selectors and pseudo-elements
The style="" attribute on an element is always more specific than any other CSS ruleset.
Specificity Examples
| Example | IDs | Classes, Attributes, Pseudo-classes | Types | Specificity |
|---|---|---|---|---|
h1 |
0 | 0 | 1 | (0, 0, 1) |
h1 + p:nth-child(2) |
0 | 1 | 2 | (0, 1, 2) |
li > input[value="name"] > .form |
0 | 2 | 2 | (0, 2, 2) |
#text |
1 | 0 | 0 | (1, 0, 0) |
Counting Specificity
For a combined or complex selector, you can determine the specificity by counting the number of "selector parts" of each type (id, class, element):
/* 1x element selector->(0, 0, 1) */
p { }
/* 2x element selector->(0, 0, 2) */
nav a { }
/* 3x element selector->(0, 0, 3) */
ul li a { }
/* 1x class selector->(0, 1, 0) */
.highlighted { }
/* 1x class, 1x element selector
-> (0, 1, 1) */
p.alert { }/* 2x class, 2x element selector */
/* -> (0, 2, 2) */
div.alert.success strong { }
/* 1x id, 1x element selector */
/* -> (1, 0, 1) */
#side-nav a { }
/* Items in a group selector are
* counted separately! */
/* 1x class selector;
* 2x class, 1x element selector */
/* -> (0, 1, 0), (0, 2, 1) */
.green, p.alert.success { }Comparing Specificity
"Which is more specific" is determined by comparing the counts (id first, then class, then element). The highest number wins.
#side-nav a { } /* (1, 0, 1) */
div.alert.success strong { } /* (0, 2, 2) */
p.alert { } /* (0, 1, 1) */
.highlighted { } /* (0, 1, 0) */
ul li a { } /* (0, 0, 3) */
nav a { } /* (0, 0, 2) */
p { } /* (0, 0, 1) */
Comparing Specificity
If two rules are equally specific (have the exact same counts), then the later rule wins.
.alert {
background-color: red;
}
.highlighted {
background-color: yellow;
}<p class="alert highlighted">
This paragraph will be yellow. Both selectors apply,
but the later rule will override the earlier one.
</p>Don't worry (too much) about specificity
Most "semantic" CSS is written to be appropriate specific. People tend to talk about rules in increasingly specific order naturally. You won't often have rules that override each other intentionally.
But if you find a rule not applying because it isn't specific enough... then make it a little more specific! Add an addition class or element to the selector to bump it up!
info340-css-specificity
By Alessia Fitz Gibbon
