CHAPTER 7

image

Specificity

When more than one rule applies to the same element and they specify the same property, there is a priority scheme that determines which rule is given precedence. In short, CSS gives priority to the rule that has the most specific selector.

Selector specificity

There are some basic rules for calculating specificity. The lowest specificity with the weight of 0 is given by the universal selector (*), which matches all elements in the document.

* { color: red; } /* 0 */

The type selectors have the weight of 1, so a selector containing two type selectors has a specificity of 2.

p { color: blue; } /* 1 */body p { color: gold; ...

Get CSS Quick Syntax Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.