CSS : Using same class within different media queries

Question

I have the following code :

@media (min-width: 1200px) {
  .color {
    color: blue;
  }
}

@media (min-width: 992px) {
  .color {
    color: red;
  }
}

@media (min-width: 768px) {
  .color {
    color: green;
  }
}

@media (max-width: 767px) {

}

<div class="color">Wow ji</div>

No matter what the screen size, Wow ji appears in green color only. What am I doing wrong here ?

Answer 1

In CSS, it is the last corresponding style that is applied, so in your code, as long as the screen is at least 768px, it will appear green.

You need either to set a max-width in the first tests, or do them in the inverse order.

Answer 2

Because what you are saying is at 768px or higher you want .color to be green you need to swap the order of your media queries around or use max-width