CSS Specificity Calculator
CSS Specificity is the means by which browsers decide which CSS property and value is most appropriate to apply to an element.
CSS Specification is based on matching rules consisting of different types of CSS selectors.
CSS Specificity Calculation
Specification of CSS Specificity is a weight applied to a given CSS declaration, determined by the number of selector types in the matching selector.
When multiple declarations have the same attribute, the last declaration found in CSS applies to the element.
Specificity only applies when the same element is targeted by multiple declarations.
| Selectors | Specificity |
|---|---|
h1{color:white;} |
0, 0, 0, 1 |
p em{color:green;} |
0, 0, 0, 2 |
.myclass{color:red;} |
0, 0, 1, 0 |
p.myclass{color:blue;} |
0, 0, 1, 1 |
p.myclass em.myclass{color:yellow;} |
0, 0, 2, 2 |
#myid {color:brown;} |
0, 1, 0, 0 |
style=" " |
1, 0, 0, 0 |
You will learn a lot about CSS selectors, declarations and CSS features in the next tutorial.