Dec 22, 2014

CSS specificity rules

If you’re reading this, you’re probably looking for how to know which CSS rules are applied. Rule of thumb:

W3C CSS2 specs : the most specific CSS rule is chosen by UA.

How to know the specificity of a CSS ? Refer to the table below
Excerpts from MDN

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

Ascending order of specificity

Weight

Selectors

Examples

1

Universal selectors

*

2

Type selectors

div

3

Class selectors

· li.descriptor-link

4

Attributes selectors

li[attr]

5

Pseudo-classes

:nth-of-type

6

ID selectors

#id

7

Inline style

style=”color:green”

Notes:

  • In case of specificity equality, the latest declaration found in the CSS is applied to the element.
  • Proximity of elements in the document tree has no effect on the specificity.