Quick Tip: Understanding CSS Specificity
The “C” in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn’t always the case. There’s something else you have to take into consideration, as well: specificity. In this quick tip, I’ll show you how to do just that.
Specificity Rules
CSS Specificity is basically this: the more specific your selector is, the more precedence it will have. To figure out which selectors are worth more, use this system:
- Give each HTML element selector 1 point. Example: p
- Give each class selector 10 points. Example: .column
- Give each id selector 100 point. Example: #wrap
- Add up the points for each piece of the selector to get the full value of the selector.
For Example
#test { background: red; } /* specificity : 100 */
.item p { background: green; } /* specificity : 10 + 1 = 11 */
p { background: orange; } /* specificity : 1 */
body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */