CSS Specificity

#css #webdev #beginners #react

Quick Summary

In this article You will learn about the tips and tricks of css specificity, specificity ranking, and also learn how calculate css specificity.

An HTML element can have multiple css rules attached to it by matching different CSS selectors. The selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

So basically, 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.

Let's have look at an example

.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>

In the code written above, we have a conflicting declaration. Our html element matches both .title class and the h1 element selectors. It is indeed a h1 element, and it also has a .title class name. Each selector has a different background-color property. Guess which background-color property the h1 element will have?

You might say it’s red because the h1 element selector comes after the .title class selector. This is the result

Yes, it is green. The class selector rule was applied. This is because .title class selectors have a higher specificity rank than h1 element selectors.

So, whenever there is a conflict of CSS properties across multiple rules, the rule with the most specific selector is chosen.

Specificity rankings

The specificity rankings of CSS rules are as follows, from the most specific to the least specific.

Inline styles - Example: <h1 style="color: pink;">
ID selectors - Example: #navbar
Class selectors .myClass, attribute selectors [type="radio"] and pseudo-classes :hover
Element selectors div and pseudo-elements :before

How to calculate specificity?

The following are the specificity value of a selector.

Inline styles have a specificity of 10000
Add 100 for each matching ID selector
Add 10 for each matching class selector, attribute selectors, and pseudo-classes.
Add 1 for each matching element selector and pseudo-elements

Example

#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

The first declaration has simply an ID selector with a specificity value of 100.
The second declaration includes an element selector with a value of 1, a class selector of 10, and an attribute selector of 10. 10 + 10 + 1 = 21
The third declaration is simply a class selector with a specificity value of 10.

As a result, the first style declaration will be applied since the first declaration has the highest specificity value of 100.

Note: Inline styles has the highest specificity and will always overrides any styles in the author's style sheet. The only way to override inline styles is by using important.

Example

h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>

The inline style will be applied since it has the highest specificity value of 1000.

!important

CSS declarations marked as important will override any conflicting declaration, even if the selector is less specific.
Using importance is considered a bad practice and it should be avoided. It can make css issues harder and make your style sheet less maintainable.

It is better to increase the specificity of the selector such that it is larger than other declarations.

More Specificity Rule

The universal selector(*) has no specificity value, which means that anytime another selector conflicts with the universal selector, the selector takes precedence.
If multiple conflicting declacration have the same specificity. The last style declaration wins.