CSS: Cascade and Specificity

Two important and powerful aspects in CSS are cascade and specificity. So what are these two? Cascade and specificity are related and they both determine which style properties will be applied to certain elements.

Cascade

But aren't selectors supposed to determine which properties will be applied? That might be the case but what if multiple selectors are trying to apply the properties on the same element? Which one gets applied?

Here's an example:

h1 {
  color: blue;
}

h1 {
  color: red;
}

What will be the colour of the h1 if this was our stylesheet? Due to CSS Cascade, the h1 will be red. That wasn't too bad was it?

Let's say we have multiple stylesheets. Does the order we link them important?

/* style.css */
h1 {
  color: blue;
}

/* style1.css */
h1 {
  color: red;
}

/* style2.css */
h1 {
  color: green;
}

What will be the colour of the h1 if we link them in order?

<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./style2.css" />
<link rel="stylesheet" href="./style3.css" />

The h1 will be green because we're linking style3.css after all the other stylesheets. It's because the order your stylesheets matters. That's why you want to put vendor stylesheets before your own.

Why?

Simply put CSS is read from top to bottom later style properties are applied to the selected elements; hence the name Cascading Style Sheet.

---

Specificity

Now, cascading is somewhat accurate; because if different selectors attempts to apply the same property on the same element, there's a level of specificity that determines which property gets applied.

<h1 id="my-heading" class="red">What colour am I?</h1>

.red {
  color: red;
}

#my-heading {
  color: blue;
}

h1 {
  color: green;
}

We now have 3 selectors for the h1 with different colours. What will the colour be? The h1 would be green because the ID selector is more specific than the others.

So what determines the specificity of a selector? What if there's a lot of selectors?

This diagram above signifies that the properties for a more specific selector will be applied to the element.

Determining Specificity

One way to see which group selectors is overall more specific than another is counting how many individual selectors are in the group.

Let's compare these groups of selectors:

<ul id="nav-list">
  <li>
    <a id="current-link" class="current">Home</a>
  </li>
</ul>

#nav-list li a.current {
  color: blue;
}

#nav-list a.current {
  color: red;
}

#current-link {
  color: green;
}

The a will be blue because it has more selectors that are more specific. A way to visualize this is to count each selector type.

	Attribute	ID	Class	Element	Total
Group 1	0	1	1	2	112
Group 2	0	1	1	1	111
Group 3	0	1	0	0	100

As you can see the first group of selectors have more selectors compared to the others.

Gotcha!

Just because one group of selectors have more selectors than others doesn't mean that group of selector will be used.

	Attribute	ID	Class	Element	Total
color: green	0	1	0	0	100
color: pink	0	0	101	0	1010

As you can see, the link is coloured green as opposed to pink even if it has more selectors. The reason for this is that no matter how many less specific selectors you have, a more specific selector will have priority.

---

Now that we've talked about cascade and specificity, we can now move on to actually talking about different CSS properties!