Combining Multiple Media Queries
Use and, or, and not operators to combine media features into complex queries.
Combining Multiple Media Queries is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The and Operator
The and keyword requires all conditions to be true simultaneously. Useful for targeting specific device sizes and types together.
@media screen and (min-width: 768px) {
/* Screens 768px and up */
}Range with and
Combining min-width and max-width with and targets a specific viewport width range (tablet-only styles):
@media (min-width: 768px) and (max-width: 1023px) {
/* Tablet range only */
.layout {
grid-template-columns: 1fr 1fr;
}
}Comma as OR
Comma-separated queries work like OR — styles apply if ANY query matches:
@media (max-width: 480px), (orientation: portrait) {
.sidebar { display: none; }
}The not Operator
not negates an entire media query. It must be used carefully — it applies to the entire query expression, not just the first condition.
@media not screen {
/* Not screen = print + speech */
}not with Parentheses (Modern)
Modern Level 4 media queries allow not() as a function on individual features:
@media (not (prefers-color-scheme: dark)) {
/* light mode only */
}only Keyword (Legacy)
The only keyword was used to hide media queries from legacy browsers that didn't support media features. Modern browsers ignore it but it is harmless.
@media only screen and (min-width: 768px) {
/* same as screen and (min-width: 768px) */
}Nesting Media Queries (CSS Nesting)
With native CSS nesting, media queries can be written inside selector blocks:
.card {
padding: 16px;
@media (min-width: 768px) {
padding: 32px;
}
}Mobile + High DPI Combination
Target mobile devices specifically (small and high-DPI):
@media (max-width: 480px) and (resolution >= 2dppx) {
.icon {
background-image: url("icon@2x.png");
}
}Print + Color
Multiple media features for print styles that only apply to color printers:
@media print and (color) {
.chart { color: revert; }
}Media Query in @import
Media queries can be applied at import time to conditionally load entire stylesheets (though this is render-blocking and should be used sparingly):
@import url('print.css') print;
@import url('mobile.css') (max-width: 767px);Logical Properties in Complex Queries
As a rule of thumb, simpler queries are more maintainable. Avoid chaining too many conditions. When a query becomes complex, consider restructuring the CSS approach rather than the query.
Quick Check
Which media query applies styles when the viewport is at least 600px wide OR the device is in landscape orientation?
Recap
and requires all conditions true. Commas work as OR between queries. not negates an entire query. Combine min-width and max-width for range targeting. Modern CSS supports media query nesting inside selector blocks and the range syntax for cleaner expressions.
Frequently asked questions
Is the “Combining Multiple Media Queries” lesson free?
Yes — the full text of “Combining Multiple Media Queries” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Combining Multiple Media Queries”?
Use and, or, and not operators to combine media features into complex queries. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Combining Multiple Media Queries” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Syntax and Common Breakpoints
- Width Height and Orientation Queries
- Prefers-Color-Scheme and Prefers-Reduced-Motion
- Combining Multiple Media Queries