CSS Specificity is the weight (and value) a web browser gives to a particular CSS rule.  Browsers give preference to rules which have a higher weight (the fatter the better!).  Rules that have a higher weight will overwrite rules that have a lower weight.  Let's take a look at a simple example below.

A Simple Example of CSS Specificity

div {
    background: #0000FF; /** blue */
    height: 100px;
    width: 100px;
}

div.red {
   background: #FF0000; /** red */
}

In the code above there are two CSS rules defined: one for div (all divs in fact!) and another for divs that have a class of 'red'. When applied to a web page, all divs on the page would have a width and height of 100px (a square!) and a background of blue. However, any divs on the page that have a class of 'red' would have a red background instead of blue. Why? Because the divs that have a class of 'red' have a higher CSS specificity (more weight = more specific = more lovin' by the browser!).

How To Calculate The Weight of a CSS Rule

This actually isn't too bad to remember, and to be honest, I have never had to calculate the weight of any of my rules to see if there was a problem on my page, I have a trick to that which you can read about below, but before we get there, let's cover how to calculate the weight:

  • 1000 points for inline styles
  • 100 points for IDs (i.e. #myDiv)
  • 10 points for Classes (i.e. div.red), attributes (i.e. input[type='text']) and pseudo-classes (i.e. :hover, :focus, etc)
  • 1 point for Elements (i.e. p, div, etc) and pseudo-elements (i.e. :before and :after)
  • 0 points for universal selectors (i.e. *, body *)

So in our example above, the first rule would have a weight of 1 (just one element specified). The second rule would have a rule of 11: one element (+1) and one class (+10). Let's move on to a crazier example by expanding from our first example above.

A Fatty CSS Specificity Example

div {
    background: #0000FF; /** blue */
    height: 100px;
    width: 100px;
}

div.red {
   background: #FF0000; /** red */
}

div#green.red {
    background: #00FF00; /** green */
}

div#green.red:hover {
    background: #FFFFFF; /** white */
}

Is this getting confusing yet? Don't worry! That's why you are reading this article! I'll help you understand. Using our definitions above for calculating weight, we can easily calculate the third CSS rule:

  • one element (+1),
  • one ID (+100),
  • and one class (+10)
  • equals 111!

So the third rule overwrites the first and second rules, but ONLY THE ATTRIBUTES IN COMMON ARE OVERWRITTEN! This means that since the 1st, 2nd and 3rd CSS rules all have background specified, the second rule overwrites the background in the 1st rule, and the 3rd rule overwrites the background in the 2nd rule.

Can you calculate what the weight of the 4th rule is? When you've got your answer, highlight the text in the following black block:

121

Getting the hang of this yet? Ok, let's look at an example where two rules could match the same element and have equal weight.

How Browsers Handle Two or More Rules with Equal Specificity

input[type='text'] { /** weight of 11 */
    background: #FFFFFF; /** white */
}

input.text { /** weight of 11 */
    background: #FFF000; /** yellow */
}

 

<input type="text" class="text" value="What is my Background Color?" size="50" />

In the example above, both rules have equal CSS Specificity, so which rule does the browser give preference to? It's the 2nd rule because it is defined AFTER the first rule. So the background of the input element would be yellow, not white.

Don't Get Tricked by CSS Specificity!

The more weight a CSS rule has, the more preference it is given by the browser. Typically, rules can be overwritten when defined after earlier rules that match the same element(s). However, if the specificity of an earlier rule is greater than the specificity of a later rule, the browser gives preference to the one with a higher weight over the one defined later on (lower in the file). Here's an example:

input[type='text'] { /** weight of 11 */
    background: #FFFFFF; /** white */
}

.text { /** weight of 10 */
    background: #FFF000; /** yellow */
}
<input type="text" class="text" value="What is my Background Color?" size="50" />

You might think that the text field would have a yellow background here, but in fact, it will be white because the 1st rule has a higher weight!

The Trick to CSS Specificity

All you need to remember is this: the more specific your CSS rule, the more weight it will have, and the more preference it will be given by the browser. This is especially true for cascading.

CSS Specificity in Cascading

Cascading is the same as selecting descendants. In the example below, an anchor tag is specified to have white text in a div with a blue background, like this:

a { /** weight of 1 */
    color: #000000; /** black */
}

div.blue { /** weight of 11 */
    background: #0000FF;
}

div.blue a { /** weight of 12 */
    color: #FFFFFF;
}

You might think the text in the anchor tag in the following code sample would be black, but it's actually going to be white. That's because the 3rd rule defined in the example above has more weight than the 1st rule.

<div class="blue">
    <a href="#">What color is this example text?</a>
</div>

Key Points of CSS Specificity

  • CSS Specificity is the weight (a value) given to a particular CSS rule and is how browsers determine which rules are applied to the HTML document.
  • Every element has a weight!
  • The more specific your rule (or selector) is, the more weight it has, and the more apt it is to overwrite earlier rules that match the same element.
  • Even if defined earlier in the file, a CSS rule with more weight will overwrite a CSS rule with less weight matching the same element and defined later on (lower) in the file.
  • When two rules match the same element and have the same weight, the rule defined later is given preference by the browser.

Learn More About CSS Specificity