What is Specificity in CSS?

What it means and how it affects our styling process.

Photo by Joshua Golde on Unsplash

Specificity in CSS is like a score or rank assigned to an element which ultimately determines which style declaration will apply to the element.

As if there are two or more CSS rules pointing to the same element, the selector with higher specificity will win and the styling rules in that winning selector will apply to the element.

Too much definitions! Let’s learn from example.

Open your VS Code or any other software that you use. You can also use online editors like codepen for this. Copy this code in your body element.

<h1>Specificity and Compound Selectors</h1>
<h2 class="heading-1">This is a heading with a class</h2>
<p>This is a paragraph with no id or class</p>
<div>
    <h2>Heading without class or id</h2>
    <p class="para">This is also a paragraph but with a class</p>
    <p id="para-2">Again a paragraph</p>
</div>
<h2 id="heading-3" class="heading-1">Another heading with an id</h2>
<p>Too many paragraphs</p>

This code mostly has h2s and paragraphs. But there is some difference between these paragraphs and headings.

Some of them have classes, some have id, some have both and others have nothing at all.

Use of class and id