CSS Specificity: Why Your Div Isn't Blue? 👩‍💻
Tags: css, learning, webdev, beginners
Published: 2024-04-18 21:58:15

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r07zsrkwxusa81x9by4.png)


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*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icbwnwq6u4g5zay19h19.png)


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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsumew0lx8ham5xvcqkv.png)


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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he70iscaf0g4fxv8qftr.png)


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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yunxmloum8pyvesfg787.png)


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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ve956c32q1h8hi7rh27.png)


## The hundreds place Value:
This is reserved for id selector, it has the value of 100 *00100*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk332gn8l5jt8lce8som.png)


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*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o13uqo4vbn5ze4dci1fq.png)


## The !important exception:
Having the *!important* flag, the important declaration is applied no matter the specificity. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv1emtpad3y44w8dl4cw.png)


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:

- The [CodePen](https://codepen.io/Asmaa-Hamdy-/pen/yLrRRog) demonstrated above
- [Specificity Calculator](https://specificity.keegan.st/).
- [CSS tricks](https://css-tricks.com/specifics-on-css-specificity/).
- Specifishity 😂:
<a href="https://specifishity.com/">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7fpn8p5gpw1xzwtqxwb.png" alt="Specifishity ">
</a>