What is CSS selector specificity and how does it work?

Selector Specificity in CSS is a relative measure of how specific a CSS selector is in the way it targets an HTML element. It is used in the Specificity algorithm to determine the final CSS property values for a given element in the DOM tree.

When
Selector specificity comes into context when there are competing values coming from different CSS declarations for a particular property of an element. The Specificity algorithm is run in the CSSOM tree generation step of the Critical Rendering Path. Before applying the Specificity algorithm, the browser holds a tree of HTML nodes constructed from CSS rules coming from the stylesheets it is parsing. It also runs the Cascade algorithm in order to determine origin and layer precedence. The browser then traverses through each node in the CSSOM tree and applies the Specificity algorithm to refine the computed values of each property of the node being traversed.

How
The Specificity algorithm calculates the weight of a CSS selector based on a set of three-column values. Each column represents a category of selectors in terms of how specifically they target an element.

For example, the specificity weights for the following rule is: 1-1-2.

#example-div .some-class div a {
  color: white;
  background-color: blue;
}

The first column, also called the ID column, keeps track of the number of id values used in the selector. The second column is called the Class column, and counts the total number of classes and pseudo-classes present in the selector. The third column is called the Type column and keeps count of the number of elements and pseudo-elements that are used in the selector. These columns are also referred to as selector weight categories.

The ID column is the most specific, then the Class column and the Type column is the least.

For a given CSS declaration, the Specificity algorithm assigns a cumulative value to each column based on the total number of selectors that fall into each weight category.

For the above example, the specificity is 1-1-2, because there is one ID selector, one Class selector and two Type selectors.

The Specificity algorithm calculates specificity for all CSS declarations as CSS stylesheets get parsed. It is important to note that it only applies a comparison when there are competing values for a certain property at a node it has traversed to, and updates the value of that property.

For the following two declarations:

div a {
  background-color: black;
  border: 1px solid black;
}

#example-div .some-class div a {
  color: white;
  background-color: blue;
}

The first rule has a specificity of 0-0-2. So, the second rule is more specific because it has 1-1-2.

For the following section:

<section id="example-div">
  <div class="some-class">
    <div>
      <a href="#">Go to Google</a>
      <a href="#">Go somewhere out</a>
    </div>
  </div>
</section>

the links will have a background-color of blue and a border-color of black, because only the background-color values are competing in this case.

So, the Specificity algorithm applies specificity to only the property values that differ in the declarations being compared.

References

1. Specificity
2. Populating the page: how browsers work - Building the CSSOM
3. Cascading order