Nesting Media Queries in CSS

CSS media queries can be nested when they are both at the root of the stylesheet. This is useful when two separate conditions need to match before a rule applies.

Here is the smallest example:

@media not print {
  @media (min-width: 0) {
    p {
      background: blue;
    }
  }
}

The paragraph gets a blue background only when both queries match: the output is not being printed, and the viewport is at least 0 pixels wide. That second condition is deliberately simple, but it shows how the queries are combined.

This is different from placing an @media rule inside a normal selector. For straightforward conditions, I would usually put them in one query with and; it is easier to read. Nesting is most useful when an outer query already groups a larger set of related rules.

← Back to all articles