Prerequisites

Basic html
CSS selectors
What are id, classes, elements and inline styles in CSS
No knowledge of Javascript is required here

Introduction

Have you ever encountered a problem where you couldn't override a style because other styles were more specific. This was because of specificity. Knowing how specificity will help you avoid a lot of CSS problems. Not sure how specificity works? Don't you worry. This guide will help you sail through specificity like a pro! So, tighten your seatbelt and let's start this roller coaster ride.

Specificity Order:

Formula to calculate Specificity

inline > ids > classes > elements, where we represent them by ( 0, 0 , 0, 0 )

Inline style is the most specific and element is the least specific.

Let's take a simple example to understand this better. Open your code editor and let's learn by doing.

index.html

    <div>
      <h1 id="heading-id" class="heading-class">Heading</h1>
      <p class="para">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque tempore
        quidem autem porro necessitatibus alias et. Similique soluta iusto
        assumenda cupiditate quas tenetur, eveniet voluptatem!
      </p>
    </div>

In this example, we have a heading tag and a para element. Let's apply some styles and see how the order of specificity works.

I want you to close the browser window and see if you can guess the output.

Let's begin.

.heading-class {
  color: blue;
}

.heading-class {
  color: green;
}

Which color will be applied on the heading - blue or green?

Before you see the result, guess the output on the screen.

So, why did this happen?

This is because CSS reads from top to bottom. Something that is at the bottom will override the top. But what happens, if we have 2 different kinds of selectors?

Let's take an example of a class and an element.

.heading-class {
  color: blue;
}

h1 {
  color: red;
}

What will be the output here?

Did you guess it right? Why blue color got applied here and not red? This is because a class is more specific than an element.

Let's take another example. This time of an id and a class selector.

#heading-id {
  color: coral;
}

.heading-class {
  color: blue;
}

What do you think will appear on the screen?

Did you guess it right? As discussed earlier in the specificity order section, an id is more specific than a class.

How to calculate specificity?

As discussed earlier, order of specificity is represented by a combination of 4 digits where 1st represents inline, 2nd represents id, 3rd represents class and last digit represents element selector.

The initial value taken is (0, 0, 0, 0).

Let's see some examples to better understand them.

#heading-id {
  color: coral;
}

Here, specificity is (0, 1, 0, 0).

.heading-class {
  color: blue;
}

Here, specificity is (0, 0, 1, 0).

h1 {
  color: red;
}

Here, specificity is (0, 0, 0, 1).

h1 .heading-class {
  color: blue;
}

Here, specificity is (0, 0, 1, 1).

Any guesses what happens when you use an inline style?

<h1 id="heading-id" class="heading-class" style="color: brown;">
        Heading
</h1>

Yes! you guessed it right. An inline style will have a higher specificity than id, class and all the elements. So, the heading change to brown color. Here, specificity is (1, 0, 0, 0).

Practice set:

Q. Can you calculate the specificity for the following:

ul #navigate li .active a

Ans: (0, 1, 1, 3)

<li style = "color : red;" >

Ans: (1, 0, 0, 0)

Q. Can you guess the number of selectors, if specificity is (0, 2, 0, 1)

Ans: 0 inline, 2 ids, 0 class and 1 element selectors

The specificity is calculated by looking at the first number. If it is larger, it uses that specificity. If the first number is same, it will move down to second number and so on.

How important is to know !important?

One way to override any style is by using !important at the end of our style. !important overrides everything. It ignores specificity and go with the style marked as important.

h1 {
  color: red !important;
}

#heading-id {
  color: gold;
}

.heading-class {
  color: blue;
}

Here, h1 overrides each one of them.

But what happens if we have 2 or more cases of !important?

In this case, all the important cancel each other out and the usual order of specificity is follow among the ones marked as important.

Word of caution:

You should never use important unless it is very very important because then the only way to override an important is to use another style and make it more specific.

Note: Sibling selector like > , + , ~ don't affect the order of specificity. No matter how many you use, they don't affect it.

Cherry on top

You can always inspect and check which all styles are overridden. It is a great way to debug when certain styles are not getting applied the way they should be.

Session and Local Storage