Cascade

The cascade algorithm determines how user agents combine property values from different sources.

Specificity

Specificity is the algorithm browsers use to determine the most relevant CSS declaration for an element.

How is specificity calculated?

Specificity is an algorithm that determines the weight of CSS declarations based on the number of selectors.

Specificity algorithm uses a three-column value (ID, CLASS, TYPE) to represent the count of selector components for each weight category.

Selector weight categories

Selector weight categories, listed in order of decreasing specificity, are ID, CLASS, and TYPE. Universal selectors and :where() pseudo-classes are not counted in weight calculations.

Combinators like +, >, ~, " ", and ||, don’t add specificity weight, but nested rules do. The specificity weight of :is(), :has(), and :not() pseudo-classes comes from the selector parameter with the highest specificity.

Matching selector

[type="password"],
input:focus,
:root #myApp input:required {
  color: blue;
}

The specificity weight of a password input type is determined by the selector with the greatest specificity weight. When nested in an element with id="myApp", the weight is 1-2-1, regardless of focus.

Three-column comparison

Specificity values of selectors are determined, then the number of selector components in each column are compared.

The ID column value determines the winning selector, with the CLASS column used as a tiebreaker.

CLASS column determines selector precedence over TYPE column when ID values match.

When CLASS and ID columns match, the selector with the higher TYPE column value wins. If all three columns match, the last declared style takes precedence.

The `:is()`, `:not()`, `:has()` and CSS nesting exceptions

The matches-any, relational, and negation pseudo-classes don’t add weight to specificity calculations, but their parameters do.

Pseudo-classes accept complex selector lists, increasing selector specificity.

CSS nesting with complex selectors behaves like the :is() pseudo-class, determining specificity from the most specific selector.

Increase element specificity with three pseudo-classes for links, overriding declarations with three or more IDs, color values with !important, or inline styles.

Inline styles

Inline styles, with a specificity weight of 1-0-0-0, override author stylesheets. To override inline styles, use !important with a targeted selector, and document the use of !important for code maintainability.

The `!important` exception

CSS declarations marked as important override other declarations within the same cascade layer and origin, reversing the cascade order. While !important can be used to override specificity, it is generally discouraged and should be avoided in favor of understanding and utilizing specificity and the cascade effectively.

The `:where()` exception

The specificity-adjustment pseudo-class :where() allows for highly specific selectors without increasing specificity. Cascade layers are recommended for overriding third-party CSS, as they provide precedence without relying on specificity. To avoid using !important, increase selector specificity, use cascade layers, or reduce the specificity of the overridden styles.

How `@scope` blocks affect specificity

Rulesets within @scope blocks don’t affect selector specificity, but the :scope pseudo-class (specificity 0-1-0) does.

On this page