Which class has higher priority when there are two or more classes in a
?

Question

Suppose I have two classes in a div like in the example below

.class1 {
      background-color: blue;
      border: solid black;
    }

.class2 {
      background-color: red;
      border: solid black;

    }

<div>
  <div class="class1 class2">
    This is red
  </div>
  <br>
  <div class="class2 class1">
    This should have been blue but its red
  </div>
</div>

There doesn't seem to be any rule regarding which class takes the precedence.

Why both the boxes has a red background in the output?

Two selectors of equal precedence are applied in the order the browser reads them from the stylesheet(s). — Roddy of the Frozen Peas, Dec 27 '19 at 17:52

score 1 · Answer 1 · answered Dec 27 '19 at 18:00

There are certain rules CSS bases on to apply conflicting styles.

In your case, the last class to be interpreted by the browser (class2 in the first <div> and class1 on the second) is the one being applied.

There are some exceptions to this rule, based on certain use cases. You can read more about CSS specificity by clicking here.

score 1 · Answer 2 · answered Dec 27 '19 at 18:01

1

i think is in which one you defined later in css file and if you use !important. You can also see this Is it possible to give one CSS class priority over another?

answered Dec 27 '19 at 18:01

Ioannis Apostolou

79
6

Which class has higher priority when there are two or more classes in a ?

2 Answers2

Which class has higher priority when there are two or more classes in a
?