CSS - Specificity

---

---

Specificity in CSS is a calculation or algorithm that is understood and used by the browser to determine the CSS declaration that needs to be applied on an element. It chooses the selector with the highest specificity value and applies the styling accordingly on any HTML element. For instance, if two or more CSS rules are specified on an HTML element, the selector with highest specificity value, will be eventually applied on that element.

CSS Specificity - Selector Weight Categories

Specificity of any selector is calculated based on the weightage given it. There are four different categories which broadly defines the specificity level of any selector. The categories are:

Inline style

Inline style declaration is given the highest priority. Refer the syntax given below:

<h1 style="color: blue;">Example</h1>

Id

Id selector is given higher priority than any other selector, but lower than the inline style. Example - #sample-demo. Refer the syntax given below:

<style>
   #sample-demo {color: blue;}
</style>

<h1 id="sample-demo">Example</h1>

Class, pseudo-class, attribute selector

Class, pseudo-class and attribute selector is given lower priority than id, but higher than the element and pseudo-element selector(s). Example - .sample-demo, :hover, [href]. Refer the syntax given below:

<style>
   .sample-demo {color: blue;}
</style>

<h1 class="sample-demo">Example</h1>

Element, pseudo-element

The lowest priority is given to the elements and pseudo-elements. Example: h1, ::after, etc.

<style>
   h1 {color: blue;}
</style>

<h1>Example</h1>

CSS Specificity - Score Of Each Selector Type

Following list shows the score earned by each selector and based on these scores, you can calculate a selector's overall specificity.

• No value: Universal selector (*), :where() pseudo-class, combinators (+, >, ~, _, ||), nesting combinator (&) has no specificity and scores 0 point.

• Element / Pseudo-element selector: It gets 1 point of specificity.

• Class, pseudo-class, or attribute selector: It gets 10 points of specificity.

• Id selector: It gets 100 points of specificity.

• Inline style attribute: It gets 1000 points of specificity.

• !important rule: The rule gets 10000 points of specificity. If an !important rule is applied to any CSS property,it takes the precedence over all other properties.

CSS Specificity - Exception Cases

The pseudo-classes such as, the matches-any :is(), the relational :has(), and the negation :not(), are not considered in the specificity calcultaion, but the parameters passed to them are part of the specificity algorithm. Refer the code block given below:

h1 {
   /* point of element */
 }
 :is(h1) {
   /* point of element */
 }
 
 h2:nth-last-of-type(n + 2) {
   /* point of pseudo-class and element */
 }
 h2:has(~ h2) {
   /* point of element */
 }
 
 div.outer p {
   /* point of class and element */
 }
 div:not(.inner) p {
   /* point of class and element */
 }

In the above CSS code block, the specificity weight provided by the :is(), :has() and :not() pseudo-classes is the value of the selector parameter, not of the pseudo-class.

CSS Specificity - Handling Issues

Following are some tips and tricks to handle the specificity issues in your code:

• Use of cascade layers and low weight specificity, instead of !important, so that the styles can be easily overwritten.

• Selectors can be made more specific with or without adding specificity.

• By reducing the ID specificity, where the id of an element can be used as an attribute selector rather than an id selector, makes an element more specific without adding extra specificity.

• By duplicating id, class, pseudo-class or attribute selectors inside a compound selector, increases specificity along with easy control over the particular section.

• Enabling one set of styles to take precedence over other set is by using cascade layers. For example, when two selectors from different layers match the same element, the origin and importance take precedence. The specificity of that selector in the losing stylesheet becomes irrelevant.

CSS Specificity - Points To Remember

Following are some important points to remember in regard to specificity:

• Specificity is applicable only when the same element is targeted by multiple declarations in the same origin or cascade layer. In case matching selectors are in different origins, the cascade decides which declaration takes precedence.

• Scoping proximity is calculated, when two selectors are in the same cascade layer and origin have the same specificity. In such a case the ruleset with the lowest scoping proximity takes precedence.

• Source order comes into picture, when the scope proximity is also same for both selectors. When everything is equal, the last selector wins.

• Regardless of the specificity of the inherited rule, the styles of a directly targeted element will always take precedence over the inherited styles.

• In the document tree, proximity of elements, has no effect on the specificity.

CSS Specificity - Equal Specificity (Latest Wins)

Following example demonstrates that when two selectors have the same specificity, the latest CSS style or rule gets applied. Here the selector is h1 element, which has same specificity, and is given two styling declarations, but the output shows that the last rule is applied and the heading text has background color as red and text color as white.

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   h1 {background-color: red;
      color: white;
   }
</style>
</head>
<body>
   <h1>Same Specificity</h1>
</body>
</html>

CSS Specificity - Specificity Hierarchy (Inline Style)

Following example demonstrates the order of specificity based on the type of selector. Inline style takes over all other declarations.

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color"  style="background-color: pink; color: blue;">Specificity Order</h1>
</body>
</html>

In the above example, inline style took precedence over all other declarations, i.e., id, class and element.

CSS Specificity - Specificity Hierarchy (ID declaration)

Following example demonstrates the order of specificity based on the type of selector. ID declaration takes over class declaration.

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color">Specificity Order</h1>
</body>
</html>

In the above example, id declaration took precedence over other declarations, i.e., class and element.

CSS Specificity - Specificity Hierarchy (Class declaration)

Following example demonstrates the order of specificity based on the type of selector. Class declaration takes over element declaration.

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 class="cl-heading-color">Specificity Order</h1>
</body>
</html>

In the above example, class declaration took precedence over other declaration, i.e., element.

CSS Specificity - Specificity Hierarchy (With !important Rule)

Following example demonstrates that the order of specificity gets irrelevant if a selector is marked as !important. In this example, inspite of an id declaration which takes precedence over all other declarations, the styling of element is applied as it is marked as important.

<html>
<head>
<style>
   h1 {background-color: yellow !important;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color">Specificity Order</h1>
</body>
</html>