Learn More About CSS Specificity

Learn More About CSS Specificity

CSS specificity is an interesting topic. As the project gets bigger, the number of CSS rules in our CSS files get larger — and things start behaving in an undesired manner.

CSS specificity is an interesting topic. As the project gets bigger, the number of CSS rules in our CSS files get larger — and things start behaving in an undesired manner. This leads to many of us using the !important condition with different elements.

To understand specificity, let’s revise some basics, and I’ll add some of my own nomenclature to it.

Different Selectors

There are three different group of selectors.

  1. The #id selector
  2. The .class selector, the attribute selector (a[target=”_blank”] ), and the pseudo-class selector (button:hover).
  3. Elements (nav) and pseudo elements (p::first-line).

To make things simpler and easier to understand, I’ll call the first group the gold group, the second group the silver group, and the third group the bronze group.

Understanding specificity

This will be a hands-on tutorial, and we’ll start with the following basic HTML file.

sepecificity-1.html

<html>

<head>
  <title>CSS Specificity</title>
</head>

<body>
  <div class="main">
    <p id="para">This is my first para</p>
  </div>
  <style>
    * {
      padding: 0px;
      margin: 0px;
    }
  </style>
</body>

</html>

We’ve added a universal rule using the * selector to remove any browser-specific default padding or margins. The * selector overrides any browser defaults.

Lets’ begin.

What would the following CSS do?

specificity-1.css

p {
      color: red
    }

    p {
      color: blue;
    }

It would make the p tag’s font color appear blue — since in CSS, the rule that lies below in a CSS file takes precedence over what lies above it.

The paragraph is blue

Now what would the following CSS do ?

specificity-2.css

div p {
      color: red
    }

    p {
      color: blue;
    }

We have two rules.

  1. The div p rule contains two tags. Since tags belong to the bronze group, we can say this rule has two bronze selectors (selectors analogous to the Olympics medals).
  2. The prule contains only one tag — one bronze selector.

The rule with the highest tally of selectors (gold, silver, bronze) in that specific order takes precedence — just like the leader board of countries in the Olympics. This is CSS specificity in a nutshell.

More examples

What would the following CSS do?

specificity-3.css

.main p {
      color: green;
    }

    div p {
      color: blue;
    }

Let’s count the selectors for the rules.

  1. .main p is a class selector that belongs to the silver group and a tag selector that belongs to bronze group. Hence, we have one silver and one bronze.
  2. div p is two Bronze selectors.

The color would be green.

One silver and one bronze is more important than zero gold, zero silver, and n bronze selectors. It doesn’t matter how large the number of n is.

Lets’ see one more example.

specificity-4.css

#para {
      color: black
    }

    .main p {
      color: green;
    }

    div p {
      color: blue;
    }

We have three rules.

  1. One gold selector
  2. One silver and one bronze selector
  3. Two bronze selectors

And the answer is simple: The color would be black.

It works exactly like the leader board containing different countries at the Olympics. Once you know the individual medal tally, you can figure it out.

Conclusion

Just count the number of selectors in a category, and you’ll know which rule would take precedence over which rule. If the tally is the same, the rule that lies below in the CSS file would take preference.

css programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Programming In Acceleration: Levelling Up Programming Skills

Some require and some are not. But acceleration programs might require you to build one. I’ll tell you how I made a computer program for the competition.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

How to use animate css tutorial with examples - Duomly Blog - Programming courses online

In this article I'd like to show you how to use animate css library to get add stunning animations to your page or application. Animate CSS is a great ...

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles