CSS Specificity

3 min readFeb 17, 2024

CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.It is a value or weight assigned to a CSS selector. The higher the specificity, the more precedence the selector has.

Let’s consider the following code

<html>
<head>
    <style>
        *{
            color: gray;
        }
        #title{
            color: red;
        }
        .h1{
            color: blue;
        }
        h1{
            color: pink;
        }
    </style>

Here the question is, what color will h1 be assigned to? This is calculated based on the selector’s components which we will discussed in this tutorial.

➡️The Cascade Algorithm

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.

Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm has 4 distinct stages.

Position and order of appearance: the order in which your CSS rules appear
Specificity: an algorithm that determines which CSS selector has the strongest match
Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type

Lets look into all these one by one

➡️Effect of Position

If there are two rules that have selectors of identical specificity, the last one to be declared won. In an HTML page, you can add styles in different ways: through a <link> tag, a <style> tag, or directly in the element's style attribute. If you have one <link> tag at the top of your page and another at the bottom, the styles from the bottom one will be used. The same goes for <style> tags; the ones lower down on the page take priority.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

If the browser doesn’t support a property, it is ignored!

➡️Specificity

CSS specificity determines which style rules get applied to an element when there are conflicts. Higher specificity means the style will be used. It’s calculated based on a point system involving inline styles, IDs, classes, and tag names

So, the order of specificity is:

Inline Style > ID Selector > Class or Attribute Selector > Element Selector > Universal Selector

🔥Specificity Calculation

To calculate specificity, assign a value to each part of the selector:

Universal Selector: 0
Element selectors and pseudo-elements: 1
Class selectors, attribute selectors, and pseudo-classes: 10
ID selectors: 100
Inline styles: 1000

Here is an example —

<h1 id="title" class="h1">CodeWithHarry</h1>

Here, the specificity value will be 111 because ID has a specificity of 100, the class has a specificity of 10, and the h1 element has a specificity of 1.

In the case of a specificity tie, the rule that appears last in the CSS is applied.

➡️Importance

The !important flag in CSS is used to give a particular style rule the highest level of importance, overriding any other competing styles. When you add !important to a CSS rule, it will take precedence over other rules affecting the same element, regardless of their specificity. For example, if you have:

p {
  color: red !important;
}

p {
  color: blue;
}

An !important at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

🔥Example

What will be the specificity value of the following selector:

a.harryclass.rohan-class[href]:hover {
  color: red;
}

Solution

To calculate the specificity value of the selector a.harryclass.rohan-class[href]:hover, you can break down its components:

Element selectors: a contributes 1 point.
Class selectors: .harryclass and .rohan-class each contributes 10 points, totaling 20 points.
Attribute selector: [href] contributes 10 points.
Pseudo-class: :hover adds another 10 points.

Add up all these values:

1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) = 41.

So, the specificity value of the selector a.harryclass.rohan-class[href]:hover will be 41.