CSS media queries support logical operators such as and, not, and only to combine or restrict conditions for applying styles. These operators allow developers to create precise and complex responsive design rules that target specific scenarios.

Types of Logical Operators in Media Queries

1
and — Combines multiple conditions so that all must be true for the styles to apply.
2
not — Excludes styles from applying when a certain condition is true.
3
only — Prevents older browsers that do not support media queries from applying the contained styles.

Example: Using and, not, and only Operators

In this example, and ensures styles apply only when both conditions match, not excludes certain viewports, and only safeguards modern media query syntax from older browsers. These logical operators make media queries more powerful and flexible in responsive design.

Difficulty: 3/10

Topics: logical operators in media queries, responsive breakpoint logic, CSS selector combinators

Scenario Questions

0-2 years experience

1
You're building a mobile-first layout and need to apply a different font size only when the screen is wider than 768px and not in landscape mode. How would you write that media query?
2
A teammate wrote a media query using 'not screen and (max-width: 600px)' but the styles aren't applying as expected. What’s likely wrong, and how would you fix it?
3
If you use 'only screen and (min-resolution: 2dppx)', what browsers are you trying to target, and why is 'only' important here?

2-5 years experience

1
Our responsive navigation breaks on iPads in portrait mode — the media query uses 'not screen and (max-width: 1024px)' but still triggers on tablets. Why is this happening, and how would you debug and fix it?
2
We have a component that should show a high-res image only on retina displays and when the user prefers reduced motion. How would you combine these conditions with logical operators, and what edge cases might you miss?
3
A CSS file with nested media queries using 'and' and 'not' is causing inconsistent styling across browsers. How would you refactor it to improve maintainability and avoid unintended overrides?

5-8 years experience

1
We're migrating a legacy site that uses 'only screen' to support old iOS devices, but now we want to drop support for browsers that don't understand media queries v4. How would you redesign the media query strategy to balance backward compatibility and modern features without bloating CSS?
2
Our design system uses complex media queries with multiple logical operators to handle breakpoints, print, dark mode, and reduced motion. How would you structure and document these to prevent team-wide bugs during feature development?
3
A performance audit shows that our media queries with 'not' and multiple 'and' conditions are causing layout thrashing on low-end devices. How would you optimize the CSS architecture to reduce reflows without losing functionality?

8+ years experience

1
We're standardizing responsive design across 12 product teams, but some use 'only' for legacy support while others avoid it entirely. How would you design a company-wide CSS media query policy that balances maintainability, performance, and cross-browser support over a 5-year horizon?
2
Our CSS-in-JS library auto-generates media queries with logical operators based on design tokens, but it's producing invalid queries when combining 'not' with multiple features. How would you architect a validation and linting layer to prevent this at build time across thousands of components?
3
A legacy product still relies on 'only screen' to hide styles from IE8, but we're now using CSS custom properties that IE doesn't support. How would you phase out the old media query patterns without breaking existing users or forcing a full rewrite?

Follow-up Questions

❓What happens if you use 'not' without specifying a media type?
❓Why would you choose 'only' over just using 'and'?
❓How would you test if your media query with logical operators is working correctly on an old iOS device?