{"id":334168,"date":"2021-02-09T12:34:45","date_gmt":"2021-02-09T20:34:45","guid":{"rendered":"https:\/\/css-tricks.com\/?p=334168"},"modified":"2021-02-09T12:34:48","modified_gmt":"2021-02-09T20:34:48","slug":"nested-media-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/nested-media-queries\/","title":{"rendered":"Nested Media Queries"},"content":{"rendered":"\n

We don’t have “regular” nesting in CSS. Maybe this<\/a> becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn’t mention anything about media queries. I’d hope we get that right out of the gate if we ever do get native CSS nesting. In fact, I’d trade it for selector nesting in a heartbeat. I’d say that’s the most useful thing a CSS preprocessor like Sass does today. <\/p>\n\n\n\n

But I’ve digressed before I even began. You can<\/em> nest media queries<\/a> in native CSS<\/a>, as long as you’re doing it from the root. It’s funny to see in native CSS, but it works!<\/p>\n\n\n\n

@media screen {\n  @media (min-width: 1px) {\n    @media (min-height: 1px) {\n      @media (max-width: 9999px) {\n        @media (max-height: 9999px) {\n          body {\n            background: red;\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      A Complete Guide to CSS Media Queries    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> nesting<\/a>    <\/div>\n  \n  
\n    \n      \"\"    <\/a>\n  \n    \n      Andr\u00e9s Galante    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Animated Media Queries    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> nesting<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      The Sass Ampersand    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> nesting<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Richard Finelli    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Approaches to Media Queries in Sass    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> nesting<\/a>    <\/div>\n  \n  
\n    \n      \"\"    <\/a>\n  \n    \n      Eduardo Bou\u00e7as    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"
We don’t have “regular” nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn’t mention anything about media queries. I’d hope we get that right out of the gate if we ever do get native CSS nesting. In fact, I’d trade it for selector […]<\/p>\n","protected":false},"author":3,"featured_media":334192,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[685,742],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334168"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334168"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334168\/revisions"}],"predecessor-version":[{"id":334191,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334168\/revisions\/334191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/334192"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=334168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}