-2

Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?

<h1 className="red blue">What color will I be?</h1>

css file:

.red {
   color: red;
}

.blue {
   color: blue;
}

Which color will be applied to the <h1> element?

I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?

codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7

mikasa
  • 783
  • 1
  • 11
  • 29
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – LianSheng Oct 12 '20 at 09:59
  • If I want to explain in full , The css styles are executed linearly from top to bottom , Therefore, it first takes on a red color then take blue ,Finally, a blue color is added to the text – Kasra Habibbeygi Oct 12 '20 at 10:05

2 Answers2

0

CSS will read from top to bottom.

So your text is blue, if you move red after blue in your CSS file, it should be red

Yiao SUN
  • 908
  • 1
  • 8
  • 26
-1

The last class that is in the code will affect the h1. If they have the same specificity, the last one is the one that the h1 will be affected by.

Tomer Levitski
  • 111
  • 4