How can you use logical operators (and, not, only) in media queries?

Q: How can you use logical operators (and, not, only) in media queries?

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. `and` — Combines multiple conditions so that all must be true for the styles to apply. `not` — Excludes styles from applying when a certain condition is true. `only` — Prevents older browsers that do not support media queries from applying the contained styles. /* Using 'and' to combine conditions */ @media screen and (min-width: 768px) and (orientation: landscape) { body { background: lightblue; } } /* Using 'not' to exclude a condition */ @media not all and (min-width: 1024px) { body { background: lightcoral; } } /* Using 'only' for compatibility */ @media only screen and (max-width: 600px) { body { background: lightgreen; } } 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

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

Using Logical Operators in CSS Media Queries

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.

Scenario Questions

0-2 years experience

Follow-up Questions