CSS Specificity: Why Your Div Isn't Blue? 👩‍💻

#css #learning #webdev #beginners

Being someone who leans more towards logic and coming from desktop development, CSS felt (and sometimes still feels) like a mysterious beast!

Early on, I struggled to understand why my styles weren't always working. Then I discovered the concept of CSS specificity. It explains how browsers resolve conflicts when multiple rules target the same element. Basically, the browser has a set of criteria to determine which style rule takes precedence!

To demonstrate here are five different divs:

I have targeted all of them with element selector and gave some background color and bottom margin.

div {
  width: 100%;
  height: 100px;
  margin-bottom: 2px;
  background: blue;
}

How specificity work?

I see CSS specificity and place value in math both determine which rule takes precedence. In place value, the leftmost digit holds the most weight, similar to how an ID selector in CSS has a higher specificity than a class selector. Just like how a number with a 3 in the hundreds place is greater than a number with a 3 in the tens place, a more specific CSS rule will override a more general one.
so let take this number: 00000

As Shown in the image above if we have an element or a pseudo-element in the selector, we get the value of 1 in the units place: 00001 and the more we add we add them to the units value so for example:

div a {
  width: 100%;
 }

we have div and a and both of them are elements so we get score of 2: 00002. and the pseudo-element has the same weight of 1 so this:

div::after {
  width: 100%;
 }

will also count as 2.

The tens place Value:

The tens place we have the class and pseudo-class selectors.
so if I did this:

.element {
  background: red;
}

because this is a class selector the value becomes 10: 00010
so it takes precedence over the element selector so we see all divs with the class element are now red.

and if we changed our minds and do this:

.element {
  background: red;
}
.element {
  background: green;
}

Because both selectors have the same specificity, the last one will be applied as you see here.

If we want to first one(Red) to be applied we shall increase it's specificity for example:

div.element {
  background: red;
}
.element {
  background: green;
}

Adding the div will increase the value to 11 so the first 4 divs will go back to red.

Another example with data attribute:

The last selector has the same specificity value as the one in line 7 but because it's last it will be applied over the element with the data attribute of name.

And the more classes we add to the selector, the more specificity value we're adding
For example the selector on line 7 will have the value of 21 so it would take precedence:

The hundreds place Value:

This is reserved for id selector, it has the value of 100 00100

If we added classes selector to it or pseudo-class selector that would add to the tens place.

The Thousands place:

This id for the inline style tag. It takes the specifitcty value of 01000

The !important exception:

Having the !important flag, the important declaration is applied no matter the specificity.

Using !important to override specificity is considered a bad practice and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

In a nutshell, the more specific the selector is the more it will have precedence over other conflicting selectors.

Here are some resources for CSS specificity weight calculations: