CSS Specificity
Tags: css, webdev
Published: 2022-06-09 11:22:28

As a Frontend Developer, you might have came across the situation, where your CSS isn't working as expected or not getting applied where it should be. And then you end up wasting your time writing wrong CSS or refactoring all styles here and there. 


![ugh-meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygrxvy1wmpxatt3yim8r.jpg)

Ugh!! 
Here CSS Specificity comes into picture. And why you should know it as a frontend developer. 

## What is CSS Specificity?
What internet says,
> CSS Specificity is the set of rules applied to the CSS selectors to determine which style will be applied to an element.

We know CSS stands for **C**ascading **S**tyle **S**heet, and cascading means the sequence of order in which CSS rules will be applied. 

Before going ahead, let' revise CSS Selectors.

### CSS Selectors

- **Universal Selector** `( * )`
```css
* {
    background-color: red;
  }
```
Universal Selector's style will apply throughout the webpage but it has `no` specificity. That means any other style with more points will take over it.

- **Inline Styles**
```html
<div style="color: red;">Hello World!</h1>
```
Inline style has highest priority. Which will override other style.

- **IDs** `( # )`
```html
<div id="my-heading">Hello World</h1>
```
```css
#my-heading {
  color: blue;
}
```
ID have second highest priority.

- **Classes, pseudo-classes and attributes** 

```css
.my-heading {
  color: blue;
}
```
Classes, pseudo-classes and attributes will have less priority as compare to IDs.


- **Elements and Pseudo Elements**

```css
div {
  color: gray;
}

//pseudo element
::selection {
  color: yellow;
}
```
Elements and Pseudo elements has lowest priority. 

- **!important**
```
.my-heading {
  color: pink !important;
}
```
An `!important` has the highest specificity and will take over all the other CSS properties. 
When we use !important, no other style like inline style, ID, class will work. 
 
![specificity-](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0vy3yjc8uywvv5ckper.png)

Let's see some example,

**Example 1**

```css
ul > li {
  color: red;
}
```

`Specificity: 0 - 0 - 0 - 2`

```css
list > list-items {
  color: blue;
}
```
`Specificity: 0 - 0 - 2 - 0`

So, the second will override the first as it has the high specificity.

**Example 2**

```css
  a.my-class.another[href]:hover {
    //some properties
  }
```
`Specificity: 0 - 0 - 4 - 1`

## Visualizing Specificity

#### For inline styling, the specificity will be 

![inline-visual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m69itggimge73flp93rs.png)

#### For IDs styling, the specificity will be 

![id-visual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njdc9b945yvztoqju458.png)

#### For Classes, pseudo-classes and attributes styling, the specificity will be 

![classes-visual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpuyt7fr48o14ral8ku6.png)

#### For Elements and pseudo elements styling, the specificity will be 

![pseudo-element-visual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc6270ktqxodigyumce4.png)

---

Hope now have understood the CSS Specificity. 


## Resources

[Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

[CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)