Specificity

article *:first-child

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

The specificity algorithm is basically a three-column value of three categories or weights

Selector weight categories

The selector weight categories are listed here in the order of decreasing specificity:

ID column
Includes only ID selectors, such as #example. For each ID in a matching selector, add 1-0-0 to the weight value.

CLASS column
Includes class selectors, such as .myClass, attribute selectors like [type=“radio”] and [lang|=“fr”], and pseudo-classes, such as :hover, :nth-of-type(3n), and :required. For each class, attribute selector, or pseudo-class in a matching selector, add 0-1-0 to the weight value.

TYPE column
Includes type selectors, such as p, h1, and td, and pseudo-elements like ::before, ::placeholder, and all other selectors with double-colon notation. For each type or pseudo-element in a matching selector, add 0-0-1 to the weight value.

No value
The universal selector (*) and the pseudo-class :where() and its parameters aren’t counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value.

Combinators, such as +, >, ~, ” ”, and ||, may make a selector more specific in what is selected but they don’t add any value to the specificity weight.

The & nesting combinator doesn’t add specificity weight, but nested rules do. In terms of specificity, and functionality, nesting is very similar to the :is() pseudo-class.

Like nesting, the :is(), :has(), and negation (:not()) pseudo-classes themselves add no weight. The parameters in these selectors, however, do.