CSS Specificity


CSS specificity is a set of rules that determines which CSS property values are applied to an element. It is used to resolve conflicts when more than one rule applies to a particular element. It is a way to determine which style declaration has the highest priority.

Specificity is based on the matching rules of CSS selectors. The more specific selector is the higher its priority. The browser applies the CSS rule with the highest priority.

If you have trouble understanding the above definition, let's take an example.

Let's say we have a p element with a class .represent and an id #represent. We have two CSS rules for this element.

/* class selector */
.represent { color: green }
/* id selector */
#represent { color: red }

Now, what color will be applied to the p element? The answer is red. Because the id selector has a higher specificity than the class selector.

CSS selectors are provided with different values, ID has higher value than class. If multiple CSS rules are pointing to the same element then on the basis of those selector values CSS rules are ranked.


CSS Specificity Rules

On the basis of different selectors specificity value is given as follows:

Calculating specificity in CSS
Calculating specificity in CSS

Calculation of specificity

To calculate the specificity of a CSS selector, we need to add the values of each selector type. For example, if we have a selector #id.class, then the specificity value will be (0, 1, 1, 0) because it has one id selector and one class selector. It can also be represented as 0110.

Let's take another example. If we have a selector p.class, then the specificity value will be (0, 0, 1, 1). It can also be represented as 0011.

Example 1:

Example

<style>
  /* specificity = 0,0,1,1 = 11 */
  p.color {
    color: blue;
  }
  /* specificity = 0,0,0,2 = 2 */
  div p {
    color: red;
    background-color: light-yellow;
  }
</style>

<div>
  <p class="color">I am blue because specificity of class selector is more than element selector.</p>
</div>
Try it

Here in the above example, both CSS rules are pointing to the same element. But the CSS rule with class selector has a higher specificity value than the CSS rule with element selector. So, the color of the p element will be blue.


# Example 2

Example

<style>
  /* specificity = 0,0,1,2 = 12 */
  div p.add-color {
    color: blue;
  }
  /* specificity = 0,1,0,1 = 101 */
  p#id-color {
    color: red;
  }
</style>

<p id="id-color" class="class-color">I am blue because specificity of id selector is more than class selector.</p>
Try it

Here in the above example, both CSS rules are pointing to the same element. But the CSS rule with an ID selector has a higher specificity value than the CSS rule with a class selector. So, the color of the p element will be red.


Example 3:

Example

<style>
  #id-color p {
    color: blue;
  }
</style>

<p style="color:red">This paragraph is red.</p>
Try it

Inline CSS has the highest specificity value. So, the color of the p element will be red.


Equal specificity

When there are two CSS rules having the same specificity value then the rule that is defined lower in the style sheet is applied.

Example

p {
    color: blue;
}
p {
    color: red;
}
Try it

  1. What is the specificity in CSS?

    Specificity is a value that is used to determine which CSS rule will be applied to an element. It is calculated by adding the values of each selector type. The selector with a higher specificity value will be applied.

  2. Why use specificity in CSS?

    When there are two or more than 2 CSS rule set for the same element, the browser gets confused about which CSS rule to apply. So, it uses specificity to determine which CSS rule to apply.

  3. What has the highest specificity in CSS?

    Inline CSS has the highest specificity value. It is 1000.

  4. What is the lowest specificity in CSS?

    Element selector has the lowest specificity value. It is 1.

  5. What is the order of specificity in CSS?

    Inline CSS > ID selector > Class selector > Element selector

  6. What is the specificity value of universal selector?

    Universal selector (*) has a specificity value of 0.