What is Specificity in CSS and How does it work?

CSS Specificity is the means by which the browser decides the priority of CSS property values applied to elements. When two or more styles target the same element then with higher specificity style will apply.

There are many benefits of understanding CSS Specificity and leveraging it to your benefit.

It helps you understand by your styles aren't being applied

Many times, we waste our hours to figure out why our CSS property is not applied to a selected element. If we don't have knowledge about specificity, we easily use !important value and think wow we solve our great problem but actually, it makes debugging more difficult.

It helps you organize and write less CSS code

Most of the time we don't think about is our code organized or not. we add many classes to a particular element to get our desired output. Because we more focused on output and this makes CSS messy. If we follow specificity we don't need to add so many classes. CSS Specificity allows you to include the CSS necessary to style your elements, in the correct way. It's easier to quickly change a style when you know exactly which selector styles that specific element. Plus, you'll probably find yourself writing less CSS code overall, which will help with maintainability.

How does it work?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations.

Selector types

Type selectors and pseudo-elements

// type selectors are html elements
h1{
}
a{
}
// pseudo elements
::before{
}

Class selectors, attribute selectors and pseudo-classes

// Class selectors
.form-input{
}
// Attribute selectors
[type="checkbox"]{
}
// pseudo-classes
{
:hover{
}

ID selectors

//ID selectors
#card{
}

Note: Universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class :not() have no effect on specificity. But the selectors declared inside :not()do. Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity but generally these are generally good practices.

How is specificity calculated?

Okay, now we understand how much specificity is important but how can be actually determined which style is the most specific? We use a four-category system to give a CSS selector a value. The selector with the most specific value wins. -Inline styles

• ID
• Class,pseudo-class,attribute
• Elements The above selector category list is written in decreasing order of CSS Specificity, Inline styles have the highest specificity, and elements have the lowest.

Let's see some examples

• Let’s say we have a snippet like this in our HTML markup–an h1 heading nested in two div elements:

<div>
  <div>
    <h1 class="hello-header">Hello World!</h1>
  </div>
</div>

And in our CSS we have the following two styles, both targeting the same h1 heading:

.hello-header {
  color: red
}

div > div > h1 {
  color: blue
}

Which do you think will be applied? In this case, we have one class selector: specificity(0,0,1,0) versus three element selectors:specificity(0,0,0,3) 10 against 3 specificity points. Red wins: Even if you have more elements within your selector, the style applied using classes will be chosen.

• What do you think happens when you target an element using exactly the same selectors and make use of different styles. Something like the example below?

<div class="hello-div">Hello World!</h1>

.hello-div {
  background-color: blue
}

.hello-div {
  background-color: red
}

In this case, the last one will apply. The background color of div becomes red.

• If you have HTML code like this:

<h1 id="hello-header">Hello World!</h1>

h1#hello-header {
  color: green
}

h1[id=hello-header] {
  color: red
}

You should be aware that the first will override the last because specificity(0,1,0,0) of the id selector is more than the attribute selector(0,0,1,0), however, both targeting the ID of the element.

Conclusion

When next you have issues with conflicting styles, don’t pull your hair out! Calm your nerves, remember the hierarchy of specificity that starts with inline styles through IDs, classes, attributes, and pseudo-class selectors to elements and pseudo-element selectors.

That's it for now folks. Thanks for reading this article. Let me know if anything is not clear.

Connect with me on Instagram & LinkedIn

Happy Coding!

#specificity