[CSS] Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Calculating

Universal Selectors, Combinators, and Negation Selector : No points

Universal selector (*), combinators (+, >, ~, ' ', ||) and negation psuedo-class (:not()) have no effect on specificity.

Elements and Pseudo-Elements : 1 point

h1, ::after {
  color: royalblue;
}

Classes, Attributes, and Pseudo-Classes : 10 points

.post, [type="checkbox"], :hover {
  background-color: teal;
}

IDs : 100 points

An ID is a unique identifier for the page elements.

#menu {
  padding: 4px;
}

Inline Styles : 1000 points

An inline style is attached directly to the element to be styled.

<div style="color: tomato;">

!important : Infinite point

.container {
  height: 100% !important;
}

Example

Select					Specificity
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100

Reference

https://specifishity.com/

https://cssspecificity.com/