Nepotism in CSS: A developer's guide to Specificity in CSS

Introduction

Hello Developers! In this article, we will be learning about the intriguing concept of Specificity (have a hard time saying that 😮‍💨). Reading this article will help you understand how does the world of cascading works!

( psst 🤫*…we are gonna see how CSS is filled with nepotism!! )*

What is Cascading?

Ever wondered why an HTML page looks so boring by default? Like… why is that h1 always black?! And those dull-looking paragraphs!! Well, I hate to tell you this, but it's actually your own browser doing that. 💔

Your browser has something called a User Agent Stylesheet, which gives your files that default look. But as we all know, this boring design can be changed with CSS! Well… here's the catch: we never actually change the default styles — we just layer our own styles on top of them. This process is known as Cascading.

Why Isn't CSS Perfect Without Specificity?

We discussed cascading above, but what happens if we add another layer on top of the first one? Would CSS simply apply the newer layer to our page? 🤔

Well, it depends — and this "depends" is exactly what Specificity solves. (Hint: CSS has its own favorites 👀)

What is Specificity?

Specificity is an algorithm using which a browser decides which CSS selector will get priority over the others. This is achieved by calculating the weight of each CSS selector.

How to calculate the weight?

Firstly, we should understand the order of specificity. The order is decided by how uniquely can a selector identify the element(s) on which CSS is desired to be applied.

Order of specificity: Inline styles > ID > Classes/Attributes > elements

We can understand this as a point system. The points for different selectors are as following:

Let’s understand this with an example:

#main-title {
    color: blue;
}

.title {
    color: red;
}

h1 {
    color: green;
}

<h1 id="main-title" class="title">Hello World</h1>

Specificity Calculation:

1. ID selector #main-title → 100 points

2. Class selector .title → 10 points

3. Element selector h1 → 1 point

Total Specificity: 100 + 10 + 1 = 111

Since ID selectors have the highest priority, the final applied color will be blue.

If there are repeated selectors present, the points would simply be added and the more points will result in higher priority.

.box.red {
    color: red;
}

Specificity Calculation:

Class selector 1 .box → 100 points

Class selector 2 .red → 100 points

So, the specificity for this example is: 0,0,2,0 or 20

!important keyword:

Warning ⚠️ : Use wisely!

The !important keyword is used to surpass all the other selectors in terms of priority. It is generally used seldom as it’s overuse can result in debugging difficulties and reduction of maintainability of the code.

p {
  color: blue !important;  /* This will take precedence */
}

p {
  color: red;

If more than one !important keywords are used, simply, the last one would be prioritized.

Thank you for reading this article, Happy Coding! 😎