← Back
css

DOM element class application order

Maybe newbie question, but I have always had this doubt, so I resolve it here for everyone:

TL;DR: The order that we apply the classes doesn't matter.

Or more specifically:

<style>
.red { color: red; }
.blue { color: blue; }
</style>

<p class="blue red">One</p>
<p class="red blue">Two</p>

Both paragraphs will be blue. The important part is the order of the rule definition.

(Anyway, stack overflow shows some examples where the order of application could matter. But they are all very edge cases)

Read more: https://vecta.io/blog/definitive-guide-to-css-styling-order


References: