Specificity is how the browser decides which rules to apply when multiple rules could apply to the same element. It is a measure of how specific a given selector is. The more “specific” wins.
For example:
.element button:hover {
color: red;
}
button:hover {
color: red;
} The .element class adds a bit more specificity so it would win with any button that has that class.
General formula for specificity in this order is:
- ID beats
- Class which beats
- Element
and the effects are cumulative as can be seen with the above example. The more element selectors that there are in a rule, the more specific it is.
When specificity is equal, it comes down to the CSS cascade.
Devtools
If you inspect an element’s style in the browser and it’s crossed out, it means its losing in its specificity against another style selector.