CSS Specificity and how !important it is in code

CSS Specificity is a relatively simple concept that many developers ignore and instead choose the lazy route. While this concept is not overly complex, it will very likely cause some troubles in your coding especially if your understanding of it is lacking in this area. Learning and understanding CSS specificity is something that definitely in my opinion separates a top-notch coder from just a run of the mill coder.

Why bother with specificity, why not just use !important?

This is something that comes up frequently, from my perspective using !important on CSS is for testing only and in production code has no place 99.9% of the time. There are some rare exceptions to this, but if you find yourself turning to !important then you are muddying your code, taking the lazy route, and forcing others to continue using !important for no reason.

CSS is parsed from the top down, meaning whatever is read first is implemented, and as it keeps reading it will update as needed. This simply means, if you have two conflicting css styles, the one which is ultimately applied will be the last one. This is where specificity comes into play. So let’s assume some very simple HTML and CSS code…

.text-item {color:red;}
.text-item {color:blue;}

<div class="text">
    <p class="text-item">This is some text!</p>
    <p class="text-item">This is some more text!</p>
</div>
<div class="footerText">
    <p class="text-item">This is some footer text?</p>
    <p class="text-item">This is some more footer text?</p>
</div>

The above code will display all of the paragraph text in blue. But perhaps you want to display the footer text in a different color, and perhaps you can not easily add change or edit the html structure you simply have access to the css, so this is where specificity starts to take form…

footerText .text-item {color:red;}
.text-item {color:blue;}

<div class="text">
    <p class="text-item">This is some text!</p>
    <p class="text-item">This is some more text!</p>
</div>
<div class="footerText">
    <p class="text-item">This is some footer text?</p>
    <p class="text-item">This is some more footer text?</p>
</div>

Looking at this code setup, you might be a bit confused, why does the footer text show in red now, even though it is not the last .text-items entry in your CSS? This is due to specificity. CSS has essentially a scoring system that tells it how important each entry in your CSS is. So more accurately CSS is read from top to bottom and abides by specificity to determine how to apply styles. So let’s go through the order of specificity, think of them as letters (many people use a number system which is good in general, but can have downfalls when you have 10 = 10 and don’t understand why one 10 is more specific than another 10).

CSS Specificity list

• A — in-line css
• B — !important
• C — #id
• D — .class
• E — elements such as div, span, p, etc.
• F — pseudo-elements such as :hover, :first, :active, etc.

With this list, A will always take priority regardless of anything else, B will take priority over any number of C, D, E, F, etc. Now this takes a bit of practice and usage to see and understand how this works. But for many they might build websites on something like WordPress, and then they will use things like plug-ins, those plug-ins might have their own CSS files for outputting their code this is where you use CSS Specificity to override styles that you want to change. If the developer of the plugin used !important all over the place, now you have to continue using !important to override plus you need to be more specific. Take this for example…

How to over ride styles with !important

#form #form-item#form-field .form-text .input {color:red !important;} // imagine this is set by a plugin, and you have no access to change it.
div #form #form-item#form-field .form-text .input {color:blue !important;} // you will have to do something like this to override their CSS!

The way you over ride this code is simply adding any more specific CSS anywhere in the code, which makes your selectors more specific. The specificity for the plugin css according to the table above would be BCCCDD, and the code over riding it would have a specificity of BCCCDDE. Also notice that in order to over ride it, you will now be forced to use !important and any further editing will also need to include !important. This is why I avoid using !important in CSS, once you start using it, you are forced to continue using it to get more specific!