Czy kolejność klas w HTML ma znaczenie?

Postawię dziś przed Tobą podchwytliwe pytanie. Czy kolejność klas w HTML ma znaczenie? Zastanów się przez chwilę.

Spójrzmy na proste style CSS…

.red {
  color: red;
}

.yellow {
  color: yellow;
}

… oraz równie banalny kod HTML:

<div class="red yellow">Head, shoulders, knees and toes, knees and toes...</div>

Jakiego koloru będzie tekst Head, shoulders, knees and toes, knees and toes?

[Wszyscy chórem krzyczą] ŻÓŁTY!

I dobrze.

Spójrz teraz na nieco inny kod HTML, w którym zmieniamy kolejność klas:

<div class="yellow red">Head, shoulders, knees and toes, knees and toes...</div>

Ponownie pytam: jakiego koloru będzie nasz tekst…?

[Chwila namysłu].

Bez trzymania Ciebie w niepewności – nadal żółty.

Kolejność klas w kodzie HTML nie ma znaczenia.

Znaczenie ma kolejność klas w stylach CSS.

Uwaga – ten krótki post ma za zadanie nie tylko przemycić dawkę wiedzy. To zapowiedź większego artykułu dotyczącego kaskadowości w CSS. Bądźcie czujni