CSS Specificity
Tags: css, webdev, beginners, react
Published: 2022-07-19 09:26:00

### Quick Summary
In this article You will learn about the tips and tricks of css specificity, specificity ranking, and also learn how calculate css specificity.

An HTML element can have multiple css rules attached to it by matching different CSS selectors. The selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

So basically, specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element.

Let's have look at an example
```javascript
.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>
```
In the code written above, we have a conflicting declaration. Our html element matches both `.title` class and the h1 element selectors. It is indeed a `h1` element, and it also has a `.title` class name. Each selector has a different `background-color` property. Guess which `background-color` property the `h1` element will have?

You might say it’s red because the `h1` element selector comes after the .title class selector. This is the result

![code resukt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve9j3efayjxmtp39gsba.png)
Yes, it is green. The class selector rule was applied. This is because `.title` class selectors have a higher specificity rank than `h1` element selectors.

So, whenever there is a conflict of CSS properties across multiple rules, the rule with the most specific selector is chosen.

###Specificity rankings
The specificity rankings of CSS rules are as follows, from the most specific to the least specific.

1. Inline styles - Example: `<h1 style="color: pink;">`
2. ID selectors  - Example: `#navbar`
3. Class selectors `.myClass`, attribute selectors `[type="radio"]` and pseudo-classes `:hover`
4. Element selectors `div` and pseudo-elements `:before`

###How to calculate specificity?

The following are the specificity value of a selector.

- **Inline styles**  have a specificity of 10000
- Add 100 for each matching **ID selector**
- Add 10 for each matching **class selector**, **attribute selectors**, and **pseudo-classes**.
- Add 1 for each matching **element selector** and **pseudo-elements**

**Example**
```javascript
#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

```
1. The first declaration has simply an ID selector with a specificity value of 100.
2. The second declaration includes an element selector with a value of 1, a class selector of 10, and an attribute selector of 10. 10 + 10 + 1 = 21
3. The third declaration is simply a class selector with a specificity value of 10.

As a result, the first style declaration will be applied since the first declaration has the highest specificity value of 100.

**Note:** Inline styles has the highest specificity and will always overrides any styles in the author's style sheet. The only way to override inline styles is by using important.

**Example**
```javascript
h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>
```

![code result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r58gjj3coaeqy7dhip6t.png)
The inline style will be applied since it has the highest specificity value of 1000.

###!important
CSS declarations marked as important will override any conflicting declaration, even if the selector is less specific.
Using importance is considered a bad practice and it should be avoided. It can make css issues harder and make your style sheet less maintainable.

It is better to increase the specificity of the selector such that it is larger than other declarations.


###More Specificity Rule

1. The universal selector(*) has no specificity value, which means that anytime another selector conflicts with the universal selector, the selector takes precedence.

2. If multiple conflicting declacration have the same specificity. The last style declaration wins.

##Conclusion
In this article you learned about css specifity rule, how to calculate specificity. 

As a frontend developer, knowing specificity is essential and I hope this article helped you to understand css specificity.