CSS classes ordering and combination

Few things to remember when combining multiple CSS classes in a document

Today we brush up on CSS .classes and especially on the importance of their order and combination.
You can follow and edit the HTML/CSS code example 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 shown below:

<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>

Multiple classes ordering and combination

The order in which classes are declared in .css file is important!

Let's spice things up a bit. Consider this HTML:

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

The result is shown below:

<div class="red grey">This text is RED/GREY because in .css (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, 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</div>

Spacing between classes declarations

When declaring CSS rules, the selector .green.grey is different from .green .grey. That space in between makes a huge difference.

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 descendant of an element with class .green.

Let's see it in action:

.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="grey blue green">...</div>

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

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

The result is shown below:

<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="grey blue green">Although .blue is declared last in .css, text is still PINK! We should introduce the concept of specificity and weight, but for now let's just say that a single class weights 1 while two classes weight 2 and so the heavier is applied.
This would happen even if .green.grey would be declared at the beginning of the .css file.</div>
<div class="green"><div class="grey">This text is ORANGE because the element with .grey class is DESCENDANT of the element with .green class.</div></div>
<div class="grey"><div class="green">This text is GREEN because child div (.green) DO NOT INHERIT (overwrite in this case) the parent div (.grey)</div></div>

I hope you found this useful and let me know in case of any mistake / missing part.