Few things worth remembering when combining multiple CSS classes in a document


.classes are one of the key CSS selectors you use when styling your site elements.

A simple example might be:

.myclass {
  color: red;
  font-weight: 700;
}

This applied to a simple HTML element:

<p class="myclass">bold and red text</p>

will produce a

bold and red text

Today's goal

With practice you get used to use them the right way, but in a big project with thousand lines of CSS code, the mistake is just around the corner and might not be easy to catch.

So let's fix a couple of concepts regarding .classes ordering and combination.

HTML elements with multiple classes will be styled respecting the declaration order in CSS file and NOT the one specified in the HTML file.
Selectors applied to nested HTML elements (like p inside a div) will respect the combination declared in our CSS file and will look at concepts like specificity.

Let's start

You can follow and edit the HTML/CSS code example explained below here

Let's start with a very simple .css declaration

.grey {color: grey}
.red {color: red}
.green {color: green}
.blue {color: blue}

.green.grey {color: deepPink}
.green .grey {color: orange}

and a very straight forward HTML:

<div class="grey">...</div>
<div class="red">...</div>
<div class="green">...</div>
<div class="blue">...</div>

The result is pretty obvious and expected:

<div class="grey">This text is GREY</div>
<div class="red">This text is RED</div>
<div class="green">This text is GREEN</div>
<div class="blue">This text is BLUE</div>

Ordering and combination

Let's spice things up a bit. Consider the same CSS code as before:

.grey {color: grey}
.red {color: red}
.green {color: green}
.blue {color: blue}

.green.grey {color: deepPink}
.green .grey {color: orange}

but let's style our div elements with multiple classes:

<div class="red grey">...</div>
<div class="grey red">...</div>
<div class="red blue grey">...</div>

what do you expect the colors to be in the 3 cases?

<div class="red grey">This text is RED/GREY because in .css code (not in HTML div class!) .red is declared AFTER .grey</div>
<div class="grey red">This proves the above. Even if you switch the position of the two classes in your HTML code, this text is going to be GREY/RED because .grey is declared BEFORE .red</div>
<div class="red blue grey">This text is RED/BLUE/GREY because .blue is declared AFTER the other two classes in our CSS code</div>

If you got them all right, you are ready for the next case. If not, take all the time you need to review the code and let it sink in.

Spacing and parent/child

When declaring our CSS rules, writing .green.grey or .green .grey has a huge impact on the output (notice the space between the two classes).

The .green.grey declaration will style all elements which have both classes (regardless of the order!).

The .green .grey declaration will style all elements with class .grey that are children/descendant of an element with class .green.

Let's clarify it with some examples. Our CSS code:

.grey {color: grey}
.green {color: green}

.green.grey {color: deepPink} /* look for a single element */
.green .grey {color: orange} /* look for parent/child elements*/

and the following HTML:

<div class="green grey">...</div>
<div class="grey green">...</div>

<div class="green">
  <div class="grey">...</div>
</div>

<div class="grey">
  <div class="green">...</div>
</div>

Here the result:

<div class="green grey">A single div with no descendant elements. Text is PINK because the element has both classes specified</div>
<div class="grey green">Regardless of the order, this text is still PINK</div>
<div class="green"><div class="grey">This text is ORANGE because the element with class .grey is a CHILD of the element with class .green</div></div>
<div class="grey"><div class="green">This text is GREEN. CSS declaration styles a .green .grey parent/child which is not found in our HTML (swapped in our example).
Hence text will be styled as .grey BUT it is immediately OVERRIDDEN by the class applied to the nested element (.green)</div></div>

Specificity

The concept of specificity is a bit complicated but not impossible to understand.

Taken from the Developer Mozilla Docs:

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.
Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

What does it mean?

Without entering the calculation explanations, let's just say that all classes are equally specific. It is the combination of two class selectors that makes it more specific than a single one.

An example.
If we take our previous CSS code:

.grey {color: grey}
.green {color: green}
.blue {color: blue}

.green.grey {color: deepPink}
.green .grey {color: orange}

and this HTML:

<div class="grey blue green">...</div>
Although .blue is declared last in our .css, text is PINK! The reason is because the .green.grey class weights (1+1)=2 while class .blue weights 1

So that wraps it up for this article.

I hope you found the reading useful and I encourage you to go and play around with the code.