CSS specificity
Specificity is how the browser decides which value wins if an element is targeted by multiple identical CSS properties with different values.
Selector A says red, selector B says blue, a particular text element matches both selectors A and B. Will it be red or blue?
This is a fundamental CSS concept developers tend to miss, often because it's not fully addressed in the beginner CSS tutorials (only "the last declaration wins") and it's abstracted away—in CSS libraries, UI framework, etc—once we begin working on real web projects.
Lack of knowledge about specificity makes it harder to understand CSS behaviour, which in turn makes it harder to modify, debug, and override styles.
Different types of selectors have different weight. The order from most powerful to least:
- !important
- inline styles (
styleattribute) - ID selectors
- class selectors; attribute selectors; pseudo classes
- type selectors; pseudo elements
Other rules:
- Directly targeted element style wins over inherited style
- When multiple declarations have same level of specificity, the last one wins
- Duplicate selector increases specificity, eg.
.foo.foooverrides.fooregardless of the order- This is often used as workaround in CSS-in-JS library such as Styled Components that auto-generate scoped class names—it's where I first came across this.
...and more: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Tbh I don't memorize the pseudo element exceptions in the MDN Docs. What's !important for me is to understand the concept and the basic rules, so I can take them into consideration when writing and debugging CSS.
Cool Tools:
- https://specificity.keegan.st/ — Specificity Calculator
- https://specifishity.com/ — Specificity rules illustrated with plankton, fish, and sharks 🐟🦈