Combining Multiple Media Query Conditions

Combining Media Query Conditions

CSS media queries support logical operators that let you combine multiple conditions into sophisticated rules.

The AND Operator

All conditions must be true:

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Screen, at least 768px wide, in landscape */
}

The OR Operator (Comma)

Any condition can be true:

@media (max-width: 480px), (orientation: portrait) {
  /* Either narrow OR portrait */
}

Commas create a list of independent queries. If any query in the list matches, the styles apply.

The NOT Operator

Negates the entire query:

@media not print {
  /* Everything except print */
}

@media not screen and (min-width: 768px) {
  /* NOT (screen AND min-width: 768px) */
}

Important: not negates the entire media query, not just the first condition. In the second example above, it negates "screen AND min-width: 768px", not just "screen."

The ONLY Keyword

Prevents older browsers from applying styles:

@media only screen and (min-width: 768px) {
  /* Ignored by very old browsers that don't understand 'only' */
}

Complex Example

/* Dark mode on a hover-capable, wide screen */
@media (prefers-color-scheme: dark) and (hover: hover) and (min-width: 1024px) {
  .interactive-card {
    background: #1a1a1a;
    border: 1px solid #333;
  }
  .interactive-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
  }
}

Best Practices

1. Keep queries as simple as possible -- complex queries are harder to debug
2. Prefer layered breakpoints over deeply nested conditions
3. Test each condition individually before combining
4. Comment complex queries to explain their intent