CSS Specificity

The CSS Specificity concept is not only a little bit of a tongue twister (try to say it three times fast!), but it can also be a bit of a mind bender too! It’s one of the more difficult concepts in CSS to grasp. In this article, we’ll cover what we mean by specificity, how it’s calculated, and how the ranking of selectors determines the style that is rendered on the page. So fret not! You’ll be a specificity expert in no time. 

What does ‘specificity’ mean?

CSS specificity basically refers to how important a selector is. Each selector is assigned a specificity depending on what type it is. The higher the number of the selector, the more specific it is and the likelier that that particular block of CSS will win the styling wars. 

Specificity is represented by four numbers, each separated by a comma:

Selector specificity = 0, 0, 0, 0

When we look at the specificity as a string of four numbers without the commas (i.e. 0000, 0101, 1001, etc.), the higher the number is, the more specific it is. 

Selectors’ specificity by rank (low – high):

Let’s walk through the different types of elements based on rank:

• ＊ 

The universal selector. It’s specificity is 0, 0, 0, 0. Usually you will see these at the top of style sheets. It’s the lowest on the rank in terms of importance. Pretty much anything will override it or add to the universal selector CSS. 

• ＞,   ➕,  ‘   ‘ ,  ∼ 

The combinators, usually seen when selecting a sibling of a child of a type selector or class selector, have no effect on specificity and do not count toward the overall number. Negation pseudo classes (:not) also fit into this specificity category. 

• div, form, ul, li, etc.

These are type selectors. These selectors pretty much encompass anything that could be considered a tag in your HTML. It’s specificity weight is 0, 0, 0, 1. If you have multiple type selectors after another separated by a combinator, you’ll add the selectors together:

div li {} ⇐ the specificity is 0,0,0,2

div li p {} ⇐ the specificity is 0,0,0,3

• .main-container, .navbar, [type=”text”], :hover

Next in line for specificity is class, attribute and pseudo-class selectors. 

Class selectors are indicated by the dot (“.”) at the beginning. Attribute selectors have an attribute inside square brackets next to its type selector. The pseudo-class selector is reserved for special elements that need more specific styling. These have a specificity of 0, 0, 1, 0. 

div.navlink a {}

– The specificity is 0, 0, 1, 1 because we have one class selector and we have one type selector. 

div.header li.list-item-disc button[type="submit"] {} 

– The specificity is 0, 0, 3, 3 because we have 3 type selectors and 2 class selector + 1 attribute selector. If we took the attribute selector off, the specificity would be 0, 0, 2, 3. Because 23 is less than 33, the CSS selector with the 0, 0, 3, 3 specificity would win out because it has the higher specificity. 

• #blue, #hidden, etc. 

ID selectors have the highest specificity amongst the CSS selectors:  1, 0, 0, 0. Because of the unique nature of the ID attribute definition, we are usually styling a really specific element when we call up the ID in our CSS. 

div#orange {}

– The specificity is 1, 0, 0, 1 because we have a type selector and an ID selector. Which style wins according to our specificity rules out of the following? 

div#orange {
	background-color: orange;
}
div.square {
	background-color: green;
	width: 150px;
	height: 150px;
}

1. The first div has a type selector and an ID selector, making it’s overall specificity 1, 0, 0, 1.
2. The second div has a type selector and a class selector, making it’s overall specificity 0, 0, 1, 1. 

Since 1001 is greater than 11, the first div wins and the background-color will be orange, contrary to the cascading nature of the CSS. 

• Inline-style

How does inline-styling fit into all of this? It is even more specific than ID selectors. An inline-style will trump just about anything in your CSS file. It’s weighted the highest in terms of specificity. 

• !important rule

The !important keyword trumps everything. It is the most specific and will overwrite any previous rules set by CSS. 

Practice

In the code editor below, I created a page of sample containers with some random class names and ID names. I would like for you to take a moment and practice using your CSS skills to change specific elements to a different color while all other divs stay the same color. How would you write those rules in CSS? What would you use to get the highest specificity if that’s what you needed to use to target a certain element. 

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>CSS Specificity</title>
       <style>
           body {
               width: 100%;
               max-width: 800px;
               margin: 0 auto;
           }
 
           main {
               width: 100%;
               height: 800px;
               display: flex;
               flex-wrap: wrap;
               flex-direction: column;
           }
 
           div {
               text-align: center;
           }
           *.square {
               /* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis?  */
               height: 150px;
               width: 150px;
               background-color: black;
               color: white;
               margin: 20px;
           }
 
           div.flex {
               /* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
          
               Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
          
               */
               display: flex;
               justify-content: center;
               align-items: center;
           }
           div#red {
               /* why does this one win out? What is the specificity of this div? */
               background-color: darkred;
           }
           #red {
               /* What would happen if we took the 'div' out of the previous selector? Which one wins?  */
               background-color: red;
           }
 
           main > div {
               font-size: 55px;
               font-weight: bold;
           }
 
           div#self-align {
               /*  What happens here?  */
               align-self: center;
           }
       </style>
   </head>
   <body>
       <main>
           <div id="self-align" class="square flex">1</div>
           <div class="square flex">2</div>
           <div class="square flex">3</div>
           <div class="square flex">4</div>
           <div class="square flex">5</div>
           <div id="red" class="square flex">6</div>
           <div class="square flex">7</div>
           <div class="square flex">8</div>
           <div class="square flex">9</div>
           <div class="square flex">10</div>
           <div class="square flex">11</div>
           <div class="square flex">12</div>
       </main>
   </body>
</html>

Conclusion

In this article we discussed CSS Specificity – specifically what selectors are more specific than others and how we figure out the actual specificity number. Don’t be discouraged if it doesn’t immediately come to you on the first read through. This is a lot of information to digest. Keep at it and you’ll get it soon enough!