What is CSS Specificity and How Does it Work?

Read MoreWhen working with CSS conflicting styles can be a thorn in your side, especially when you don’t know where the conflict is originating from. This tutorial will give you a firm understanding of CSS specificity which will help fill in any knowledge gaps so you don’t end up pulling your hair out of frustration.Note: perhaps you’re a seasoned CSS pro? This is a topic developers have enjoyed talking about since the earliest days of CSS, but it’s always fun to refresh your memory!Everything You Need to Know About CSSThis tutorial is part of our Learn CSS: The Complete Guide—check it out and get bookmarking!What is CSS Specificity?MDN put it nicely (as always):“Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.”That means that CSS specificity is a set of rules used by browsers in determining which of the developer-defined styles will be applied to a specific element. For a style to be applied to a particular element, the developer has to abide by the rules, so that the browser knows how to apply the style.Come on mate, it’s not that badWhen two or more styles target a particular element, the style with the highest specificity is the one that gets applied.Understanding the Hierarchy of CSS SpecificityThe specificity of a style is dependent on where the selector ranks when compared to other conflicting selectors. Selectors define how you target the element you want to style in CSS. Let’s look at the selectors in the hierarchy of highest to lowest:Inline StylesThese are styles defined in the HTML document, directly attached to the element that’s to be styled. For example:<h3 style=’color: red’>Hello World</h3>These kinds of styles are not commonly used as it’s considered best practise to “separate concerns” and have your styles in an external stylesheet. Yet, in the hierarchy of styles, inline styles rank highest.ID SelectorsID selectors are the next in the queue. These are selectors that target an element using the element’s ID. IDs are unique; an element can have just one ID, and that ID can be used only once within an HTML document.<h3 id=”sub-header”>Hello World</h3>They can be overridden by inline styles.Classes, Attributes, and Pseudo ClassesID selectors are followed by class selectors, attribute selectors, and pseudo-class selectors. Here’s some example markup, showing corresponding CSS selectors with each one:<!– Class Selector –>
<h3 class=”hello-header”>Hello World!</h3>
<!– .hello-header { color: blue } –>

<!– Attribute Selector –>
<a href=”https://webdesign.tutsplus.com”>Web Design Tutorial</a>
<!– a[href=”http://webdesign.tutsplus.com”] { color: green } –>

<!– Pseudo Class Selector –>
<button>Delete</button>
<!– button:hover { background-color: blue } –>Elements and Pseudo ElementsElement selectors allow you style the selected element, while pseudo-element selectors let you style part of the selected element.<!– Element selector –>
<p>This is an element selector</p>
<!– p { color: red } –>

<!– Pseudo-element selector –>
<p>This is a paragraph</p>
<!– p::first-letter { color: green } –>

These selectors rank lowest in the hierarchy of CSS specificity.Using Rank to Score CSS SpecificityTo calculate the specificity of a style, we’ll start at 0 for each rank. We can then increment the rank based on the selectors used to target the element. Here’s how our starting point looks:For inline styles we’ll have a specificity scored like this:In this case, an inline style is given a score (in the simplest terms) of 1000. A single ID selector would have a 1 added to the box underneath ID, effectively giving a score of 0100. Let’s look at some specific examples to make it clearer.CSS Specificity Rules and ExamplesClass Selectors Override Multiple Element SelectorsLet’s say we have a snippet like this in our HTML markup–an h1 heading nested in two div elements:

Hello World!

</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: versus three element selectors:10 against 3 specificity points. Red wins:

Even if you have more elements within your selector, the style applied using classes will be chosen.The Last Rule WinsWhat 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?<h1 class=”hello-header”>Hello World!</h1>.hello-header {
color: blue
}

.hello-header {
color: red
}Take a wild guess.

The lower one (the most recently processed style rule) is viewed as being “closest to the element” and therefore the most specific in this case. Based on that fact, it gets applied to the element. This also applies to all cases where the selectors used have equal CSS specificity.Below is an example of us making use of elements and pseudo-elements selectors–selectors with equal specificity.h1 {
color: blue
}

h1::first-line {
color: red
}The style applied to the element, in this case, is the last style.

ID Selectors Override Attribute SelectorsIf you have HTML code like this:<h1 id=”hello-header”>Hello World!</h1>with the following style rules:h1#hello-header {
color: green
}

h1[id=hello-header] {
color: red
}You should be aware that the first will override the last, as you can see below.

These two styles are both targeting the ID of the element, but the first declaration does so using the ID selector (0100 points), whereas the second does so via an attribute selector (0010 points).Inline Styles Have More SpecificityAs we’ve mentioned, rules defined on the style attribute of the element itself have even more specificity as they are “closest” to the element that is to be styled. These kinds of styles override styles defined elsewhere.The purple color in this case is out ranking both the red and green used in the previous example (1000 against 0100 and 0010).

!important RuleYou might be thinking, where does the !important rule fit in? The !important keyword is often used in a last-ditch attempt to win the CSS specificity wars when all else fails. Let’s see it in action by adding a new rule to the last example we have above.Making our declarations look like this changes the whole game.h1#hello-header {
color: green
}

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

h1 {
color: blue !important
}Without the !important rule, that last style stands no chance as (being an element selector) it ranks lowest.

It’s important to know that this rule has nothing to do with specificity, it’s simply overriding the other rules and its use is considered bad practice.Universal SelectorsUniversal selectors target anything on the whole page. Here is an example of a universal selector:* {
color: green;
}They can also be used as child selectors (eg: div * {}). These kinds of selectors have a specificity of 0000.ConclusionWhen 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.And when writing CSS remember that you should only be as specific as you need to be, and not more. By being overly-specific with your style rules you’ll make it more difficult to counter those styles in certain situations.Learn More About CSS SpecificityThere are tons of resources that you’ll find useful if you plan to dig deeper into CSS specificity. You can start with these:Web Development
The 30 CSS Selectors You Must Memorize
Jeffrey Way
CSS
7 CSS Units You Might Not Know About
Jonathan Cutrell
CSS
Exploring CSS Pseudo-Elements
Craig Campbell

CSS Specificity Wars is a classic visualization by Andy Clarke from 2005

CSS 2.1 selectors, Part 1 will help you understand selectors better if you still have gaps in your understanding of the topic.

CSS Inheritance, The Cascade And Global Scope will teach you about inheritance and the cascade.
There is also a Specificity Calculator that you can make use of.
Finally, you can also read about specificity on CSS-Tricks and Smashing Magazine.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Hey Twin Tiers! Would you like a...

free website, free email, free SEO, & free EVERYTHING for a full YEAR?!?!?

Click below and be entered to win FREE digital media for a year!

A custom-built website, email addresses, SEO, and so much more… all for free… all for a full year!

Why? … Well, we’re new here and we’d like to get known. But HURRY… this definitely wont last!!!

We swear there is no catch… so what do you have to lose?