CSS Specificity

❮ Previous Home Next ❯

What is Specificity?

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element.

The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.




Selector weight categories

The selector weight categories are listed here in the order of decreasing specificity:

Selector Specificity Value Example
Important Rule (!important) 10000
p {color:pink !important;}
Style Attribute 1000
<p style="color:pink">
ID(#) 100
#example {color: red}
Class(.) 10
.example {color: green;}
Pseudo-Classes 10
button:hover {color: red;}
Attribute Selectors 10
input[type='number'] {color: green;}
Pseudo-Elements 1
p::first-letter {color: red;}
Type(element) 1
p {color: blue;}
Universal(*) 0
* {color: yellow}

In simple words all of these can be divided into four main groups:




ID (#) Selector

ID selectors are used to target an element using the element's ID.

ID selectors have higher specificity than classes and elements. In our specificity weight system, they have a value of 100.

Example

<html>
<head>
<style>
#example {color: red;}
.demo {color: green;} 
p {color: blue;} 
</style>
</head>
<body>

<p id="example" class="demo">Hello World!</p>

</body>
</html>

Calculation:

#example have higher weight than other selectors so color red is applied to element.




Inline Styles

Inline styles are applied directly on the element in the HTML document.

Inline styles have the highest specificity. In our specificity weight system, they have a value of 1000.

Example

<html>
<head>
<style>
#example {color: red;}
.demo {color: green;} 
p {color: blue;} 
</style>
</head>
<body>

<p id="example" class="demo" style="color: yellow">Hello World!</p>

</body>
</html>

Calculation:

style="color: yellow" have higher weight than other selectors so color yellow is applied to element.







Elements Selector

We use element selectors like a, p, and div to style a selected element.

Element selectors have the lowest specificity. In the specificity weight system, they have a value of 1.

Example

<html>
<head>
  <style>
    * {
      color: red;
    }
    p {
      color: green;
    }
  </style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

Calculation:

p {color: green;} have higher weight than other selectors so color green is applied to element.




Class Selector

Class selectors are used to target an element using the element's attribute class.

Class selector have a higher specificity than element selectors. In our specificity weight system, have a value of 10.

Example

<html>
<head>
<style>
.demo {
  color: green;
}

p {
  color: blue;
}
</style>
</head>
<body>

<p class="demo">Hello World!</p>

</body>
</html>

Calculation:

.example {color: green;} have higher weight than other selectors so color green is applied to element.




!important rule

The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. It has 10000 weight to the specificity value.

Example

<html>
<head>
<style>
#example {color: red;} /* weight 100 */
.demo {color: green;} /* weight 10 */
p {color: blue !important;} /* weight 1 + 10000 = 10001 */
/* inline style weight 1000 */
</style>
</head>
<body>

<p id="example" class="demo" style="color: yellow;">Hello World!</p>

</body>
</html>



Notes

❮ Previous Home Next ❯