Quick Tip: Understanding CSS Specificity

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 */

Leave a Reply

Your email address will not be published. Required fields are marked *