CSS: greater-than or smaller-than Media Queries

The most common media queries are usually based on a minimum or maximum viewport width:

• @media (max-width: 10rem) { ... }
  Matches when the viewport width is smaller than or equal to 10rem.

• @media (min-width: 10rem) { ... }
  Matches when the viewport width is larger than or equal to 10rem.

But sometimes, there is a need to use media queries that match either one of the following.

• greater than and not equal to something
• smaller than and not equal to something

There is currently no intuitive way to achieve that in media queries. While this feature was added to Media Queries Level 4, it still has lacking browser support. To have such a selector today, you need to use the not operator. With that, you can invert a media query which allows us to do what we want as can be seen in the example below. Note that when you use the not operator, you must also specify a media type. The example is using all, but you can replace that with another media type if necessary.

/* matches when the viewport width is larger than and *not* equal to 10rem */
@media not all and (max-width: 10rem) {
  .someSelector {}
}

/* matches when the viewport width is smaller than and *not* equal to 10rem */
@media not all and (min-width: 10rem) {
  .someSelector {}
}