DEV Community

Cover image for CSS Specificity
Emma Bostian ✨
Emma Bostian ✨

Posted on • Updated on

CSS Specificity

CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style.

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

Helps understand why styles aren't applied

To understand why your CSS styles aren't being applied to an element, you must first have a basic understanding of CSS Specificity.

It's so easy to just slap an !important value on your CSS styles, but this causes your CSS to quickly spiral out of control.

By understanding how styles are applied, you can ensure the styles you want displayed are being rendered.

Helps organize code

CSS can quickly become unruly when we don't stop to think about an architecture for our style sheets, and instead throw a ton of CSS selectors around without thinking about specificity.

One way to combat messy CSS, and ensure your specificity rules are being applied as intended, is to adopt a CSS naming architecture. Block-element-modifier (BEM) is one of the most commonly used CSS naming architectures. We won't delve into naming architectures now, but they can help you ensure that your styles aren't overriding each other.

By making the most of CSS Specificity, you ensure that your code is organized, and your selectors won't conflict with one another.

Helps write cleaner code

It's not uncommon to see a code base riddled with !important overrides. Although !important gives you a way to say "Forget all those other styles, I want this one to be applied!!!" it can cause serious issues when you need to update a style and you're not sure where to begin.

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

At a high-level, there are three buckets of specificity your CSS will fall under:

Type selectors & pseudo-elements


Class selectors, attribute selectors, pseudo-classes





  • Universal selectors, combinators (>, +, etc.) and negation pseudo-classes :not() have no affect on CSS specificity; the styles defined inside of the :not() pseudo-class do.
  • Inline styles (styles added to an HTML element) always override any styles declared in an external style sheet; these are generally not good practice as it's best to define all of your styles in one place.
  • !important overrides all other denoted styles; this is bad practice as it can make debugging CSS much more difficult. When two conflicting styles make use of an !important declaration, the most specific style wins.

You may run into situations when leveraging CSS frameworks, such as Bootstrap, where you can't use CSS specificity to override the native styles. In these instances, using !important is not considered bad practice.


You may be asking yourself "Okay, CSS Specificity is great, but how do I actually determine 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.




Example 1

Let's say we have an unordered list with three list items. The list and all of its list items have class names. And let's say we've created two different CSS selectors. Which one is more specific?


Let's break down the calculation of the CSS specificity.


Example 2

Let's suppose you're styling a navigation element, which has the following HTML structure.


We have two styles which change the color of the navigation list items on hover. We want to change the color of list item two on hover to pink. But it's not working as expected.


In order to change the color of list item two on hover to pink, we need to have a more specific CSS selector. Thus, prepending the selector with nav#nav or even just #nav will do the job.

Example 3

Let's calculate the CSS Specificity of the code snippet below.



CSS Specificity isn't hard, but it's a skill which, when learned, will save you immense amount of pain and suffering.

By learning these key specificity rules, you will set yourself up to write organized and optimized CSS code.

Check out the resources below for some more CSS Specificity fun!


Specificity Calculator

CSS Tricks: Specificity

Specificity Star Wars

CSS Specificity

Discussion (35)

kathryngrayson profile image
Kathryn Grayson Nanz

This was a super cool read! Especially the calculation at the end – that was definitely something I knew would work, but never knew why. Thanks for a great explanation.

Also, I love the effort you put into your section headers, etc. The yellow is really lovely, and that attention to visual detail isn't something you see a lot in other blogs :)

kazionovm profile image
Max Kazionov • Edited on

Hi, Emma!
Thank you for this great article, it helped me greatly;

Look at the screenshoot, it seems to me it doesn't work properly;

combinator selector > selects li elements that are direct children of an element of that id.

Check this 😉


pietvandongen profile image
Piet van Dongen • Edited on

You're right, it should be:

nav#nav li:hover {
    color: purple;
Enter fullscreen mode Exit fullscreen mode

Otherwise, excellent article!

maggiew61 profile image

I think you are right. I found that strange too.

rhymes profile image

Cool article, thanks Emma!

Didn't know there was a formula to calculate specificity nor tools to aid. They might be handy when you're trying to debug :)

You may run into situations when leveraging CSS frameworks, such as Bootstrap, where you can't use CSS specificity to override the native styles. In these instances, using !important is not considered bad practice.

Bootstrap is the main reason we use !important :D Fortunately I see less and less Bootstrap around.

ellissei_studio profile image
Elisei Miron

Personally I'm a big fan of Bootstrap 4 grid, since they use flexbox.

But regarding the Bootstrap overrides, don't override it with !important.
Customise it by overriding the sass variables instead of styles for every component. A good example is

adamorlowskipoland profile image

Quick check ;-)

I think using !important is always ALWAYS a bed practice.
Sometimes you have no other choince but at least try before.

begroff profile image

This is the most succinct article I have ever seen on specificity. I love the use of graphics for calculating specificity. Excellent job!

antonio_pangall profile image
Antonio Pangallo

Nice article!

jhominal profile image
Jean Hominal

Thank you very much for this article!
I knew that “CSS specificity” was a thing but I never knew that there was such a (mathematically) simple calculation rule.

nickytonline profile image
Nick Taylor (he/him)

I posted this in tonight's DevDiscuss on Twitter, but thought it would be helpful to leave this in the comments of your post as well.

itachiuchiha profile image
Itachi Uchiha

Thanks, Emma. It was so nice to read it.

equinusocio profile image
Mattia Astorino

Nice work Emma. This is the kind of content i want to see on 👍🏻

emmabostian profile image
Emma Bostian ✨ Author

Thank you!

nickytonline profile image
Nick Taylor (he/him)

The Star Wars one cracks me up. I saw it again for the first time in a while a couple of weeks ago and was 😂.

lee493 profile image
Burt Macklin

This is such an amazing explanation!!

Thanks a lot!

ranawebd profile image

Thanks for showing us how CSS specificity work. You describe it in a very simple way.

eclecticcoding profile image

Thank you Emma for this resource. I go bad and reread every few months.

dhruvi16 profile image

This is an awesome read! I found out something new and logical.

Thanks for the effort!

paulshryock profile image
Paul Shryock

Love it. Great article!

jqueryalmeida profile image
Jerry Almeida

thanks Emma :D

jabary profile image
Mohammed Jabari

Thanks that was the most clear explanation of CSS specificity I have come through.

frcharry profile image
Fabio Ricardo Charry

I didn't know about specifity in CSS, It was nice to learned it in such a practical and math-fun way, thank you Emma!

phantomread profile image

Great article,

Emma u are a star .

ivanoung profile image
Ivan Oung

The best kind of article! Thank you for the clear explanation!

damianrivas profile image
Damian Rivas

Those headers are nice. How did you make them?

jmike1690 profile image

Thank you for this article, was so great!! I'll start using the four-category system.

vuduyanhtuan18411998 profile image

Thank you for sharing such a wonderful post :)

andhop profile image
Andy Hopwood

Really awesome read. I've spent hours before now trying to override styles in WordPress templates (made by other people) and it's been brutal.

desolosubhumus profile image
Desolo Sub Humus 🌎🌍

I knew about this already, but it's nice to have something to reference anyway, especially when it's this short and sweet.

codingpixie profile image
Coding Pixie

great post Emma.

odunlemi profile image
Abiodun Longe

Decided to finally look up what the !important value was all about after I came across it now in bootstrap's source CSS, couldn't have been explained easier, thank you.

sandeshsapkota profile image

Hello Emma !
this is a great article. I was seeking article on specificity like this. I know
what to do now !