4 min read
•Question 3 of 49mediumWhat is CSS Specificity?
Understanding how CSS specificity determines which styles apply.
What You'll Learn
- How specificity works
- Specificity hierarchy
- Calculating specificity
What is Specificity?
Specificity determines which CSS rule applies when multiple rules target the same element.
Hierarchy (highest to lowest)
| Selector | Weight |
|---|---|
| Inline styles | 1000 |
| IDs | 100 |
| Classes, attributes, pseudo-classes | 10 |
| Elements, pseudo-elements | 1 |
Examples
styles.cssCSS
/* Specificity: 1 */
p { color: black; }
/* Specificity: 10 */
.text { color: blue; }
/* Specificity: 100 */
#main { color: red; }
/* Specificity: 11 */
p.text { color: green; }