{"id":346355,"date":"2021-08-10T07:51:39","date_gmt":"2021-08-10T14:51:39","guid":{"rendered":"https:\/\/css-tricks.com\/?p=346355"},"modified":"2021-08-10T07:51:41","modified_gmt":"2021-08-10T14:51:41","slug":"css-nesting-specificity-and-you","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-nesting-specificity-and-you\/","title":{"rendered":"CSS Nesting, specificity, and you"},"content":{"rendered":"\n

Here\u2019s Kilian Valkhof on CSS nesting <\/a>which isn’t available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, for example, the following code:<\/p>\n\n\n\n

div {\n  background: #fff;\n  & p {\n    color: red;\n  }\n  border: 1px solid;\n}<\/code><\/pre>\n\n\n\n
When CSS nesting lands, that last line border: 1px solid;<\/code> won’t be applied to the div like it would be in, say, Sass. That\u2019s because with CSS nesting, any styles you want applied to that div have to be written before any nesting styles are written. I think this makes a ton of sense because I tend to enforce that style in any Sass codebases I work on (it’s just much easier to read), but I can imagine people getting confused about this the first time around.<\/p>\n\n\n\n
One of the smaller and, yet for some reason, super exciting<\/em> things about CSS nesting is how we’ll be able to nest media queries, as Kilian notes, just like this:<\/p>\n\n\n\n
body {\n  background: red;\n  \n  @media (min-width: 40rem) {\n    & {\n      background: blue;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
This is very exciting! <\/p>\n","protected":false},"excerpt":{"rendered":"
Here\u2019s Kilian Valkhof on CSS nesting which isn’t available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, for example, the following code: When CSS nesting lands, that last line border: 1px solid; won’t be applied to the div […]<\/p>\n","protected":false},"author":223806,"featured_media":346502,"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":"Kilian Valkhof: CSS Nesting, specificity, and you","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":"One of the smaller and, yet for some reason, super exciting things about CSS nesting is how we'll be able to nest media queries.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[742],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-nesting.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":334168,"url":"https:\/\/css-tricks.com\/nested-media-queries\/","url_meta":{"origin":346355,"position":0},"title":"Nested Media Queries","date":"February 9, 2021","format":false,"excerpt":"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,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":236708,"url":"https:\/\/css-tricks.com\/the-sass-ampersand\/","url_meta":{"origin":346355,"position":1},"title":"The Sass Ampersand","date":"January 12, 2016","format":false,"excerpt":"The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS. Let's see if\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":293607,"url":"https:\/\/css-tricks.com\/can-you-nest-media-and-support-queries\/","url_meta":{"origin":346355,"position":2},"title":"Can you nest @media and @support queries?","date":"August 5, 2019","format":false,"excerpt":"Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS. This works: @supports(--a: b) { @media (min-width: 1px) { body { background: red; } } } And so does this, the reverse nesting of the above: @media (min-width:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/sass-nesting.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351402,"url":"https:\/\/css-tricks.com\/early-days-for-css-scoping\/","url_meta":{"origin":346355,"position":3},"title":"Early Days for CSS Scoping","date":"September 6, 2021","format":false,"excerpt":"There is a working draft spec for CSS scoping now. Other than a weird period where