If we add a class with the same CSS property to an element, which property is applied?

Question

In the context of this exercise, if we add a class with the same CSS property to an element, which property is applied?

Answer

If you add a class to an element which has the same property as another class, then the last CSS property rule appearing in the file is the one that gets applied to it.

For example, say that you had the element
<div class="red">Text</div>

with the following CSS,

.red {
  color: red;
}

.blue {
  color: blue;
}

Then, say that we add the class “blue” to this element, such that it is now
<div class="red blue">Text</div>.

Because the CSS rule color: blue comes after color: red, it will be the one applied to the element.

7 Likes