A Guide to CSS Specificity: The Algorithm Explained

CSS specificity is an important topic to understand if you want to get better at CSS. It is the set of rules applied to CSS selectors that determines which style is applied to an element.

To understand this better, it's important that we understand a related topic – cascading in CSS .

The Cascading Nature of CSS

The CSS means “Cascading Style Sheets”. The cascading means the order in which the CSS rules are applied to an element and by default, the style rule that comes last is applied to an HTML element.

Let's use an example to understand this.

We have an paragraph tag and have applied two style rules to this tag which changes it’s background-color:

<p class="style1 style2"> This is a test paragraph</p>

Here’s the CSS:

.style2 {
  background-color: red;
}

.style1 {
  background-color: yellow;
}

This is the result:

Notice that the style rule that comes last is applied to an above HTML element.

Now, take this example:

<p class="style1" id="style2"> This is a test paragraph</p>

Here’s the CSS:

#style2 {
  background-color: red;
}

.style1 {
  background-color: yellow;
}

The result is this:

Notice here that even though the .style1 comes last but the style rule of #style2 is applied. This occurs because CSS uses specificity to determine what style value to apply to the element.

What is CSS Specificity?

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

If an element has two or more selectors with conflicting style rules, a browser will look at the specificity score to determine which style should be applied.

How does Specificity Hierarchy work?

Specificity involves creating score to rank or compare selectors. The selector with the highest score will have its style rules applied to the element. An exception to this rule, which we’ll discuss later in this article, comes into play when the !important property is applied to a selector.

A selector’s specificity score is determined by a four-part specificity hierarchy:

1. Inline style selectors are style rules defined in an HTML document using the style attribute. These selectors are given a specificity score of 1000 and take precedence over any other selector types.

   

2. ID selector selectors, like (#modal) have a specificity score of 100.

   

3. Class (.modal), pseudo-class (:active), and attribute selectors ([href]) have a specificity score of 10.

   

4. Element (div) and pseudo-element (:after)selectors have a specificity score of 1.

   

NOTE: There is also a universal selector (denoted by the * character) has a specificity of zero

How Specificity is calculated?

Below Table shows how specificity is calculated for multiple selectors:

Let's use an example to understand this.

<div class="modal">
  <div>
    <h1>Example</h1>
  </div>
  <div class="desc">
    <p id="desc-text">This is an example.</p>
  </div>
</div>

Here the CSS:

 .modal .desc p {
    color: blue;
  }

  #desc-text {
    color: green;
  }

The result is:

This happens because the specificity score of #desc-text is more than the specificity score of.modal .desc p :

Let’s take another example:

<div class="modal">
  <div>
    <h1>Example</h1>
  </div>
  <div class="desc">
    <p id="desc-text">This is an example.</p>
  </div>
</div>

Here the CSS:

 .modal p {
    color: blue;
  }

 .desc {
    color: green;
  }

The result is:

This happens because the specificity score of #desc is more than the specificity score of.modal p :

What is the !important rule exception?

When an !important rule is used in a style declaration, it takes precedence over any other declarations and its styling is applied to the element.

Here an example:

<div class="modal">
  <div>
    <h2 class="desc" style="color: green">!Important</h2>
  </div>
</div>

Here the CSS:

 .desc {
    color: blue !important;
  }

The result is:

When two declarations with the !important rule conflict on the same element, the declaration with the greater specificity is applied.

Here’s an example:

<div>
  <div>
    <p class="paragraph">An empty div</p>
  </div>
</div>

Here’s the CSS:

  .paragraph {
    color: green !important;
  }

  p {
    color: #d40000 !important;
  }

The result is:

In this example, the class selector will have the style rule applied to the element because it has a higher specificity score than the element selector.

Conclusion

Specificity is one of the main pillars of CSS and a very useful concept to understand. A deeper knowledge of specificity will help you quickly specify which selector’s style rules should be applied to a particular element and will also help you identify and address development bugs faster.