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.