--- title: CSS Nesting UX in DevTools | daily.dev description: This article discusses the problem of inconsistent CSS nesting display in DevTools and proposes several solutions to improve the user experience. It also... canonical: https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Nesting UX in DevTools | daily.dev og:description: This article discusses the problem of inconsistent CSS nesting display in DevTools and proposes several solutions to improve the user experience. It also... og:url: https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny og:image: https://api.daily.dev/og/posts/vdAySJsnY.png og:image:alt: CSS Nesting UX in DevTools og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS Nesting UX in DevTools **[Ahmad Shadeed](https://daily.dev/sources/ishadeed)** · 4 min read · 10 upvotes · 1 comments ## Summary This article discusses the problem of inconsistent CSS nesting display in DevTools and proposes several solutions to improve the user experience. It also explores the different behaviors of DevTools when copying a nested rule set. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@betweennames** · 0 upvotes > If any of these proposals (or something similar) gets implemented, I think it should be applied to both nested and "the old way" identically. > > Both of the following sources codes should be identical in the UI: > > ```css > div { > & p { > &:invalid { > color: red; > } > } > } > ``` > ```css > div p:invalid { > color: red; > } > ``` --- Tags: [#devtools](https://daily.dev/tags/devtools), [#frontend](https://daily.dev/tags/frontend), [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS Nesting UX in DevTools","url":"https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny"},"datePublished":"2023-11-19T15:55:55.280Z","dateModified":"2026-03-15T02:29:35.440Z","description":"This article discusses the problem of inconsistent CSS nesting display in DevTools and proposes several solutions to improve the user experience. It also...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/babbd8ded3c02502db58e27eb4afbe40?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/babbd8ded3c02502db58e27eb4afbe40?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Ahmad Shadeed","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Ahmad Shadeed","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/2bcc7ec837854040856ba4a4eb8946d0","url":"https://daily.dev/sources/ishadeed"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"devtools,frontend,webdev","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Ahmad Shadeed","item":"https://daily.dev/sources/ishadeed"},{"@type":"ListItem","position":3,"name":"CSS Nesting UX in DevTools"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-nesting-ux-in-devtools-vdaysjsny","comment":[{"@type":"Comment","text":"If any of these proposals (or something similar) gets implemented, I think it should be applied to both nested and “the old way” identically.\nBoth of the following sources codes should be identical in the UI:\ndiv {\n & p {\n &:invalid {\n color: red;\n }\n }\n}\n\ndiv p:invalid {\n color: red;\n}","datePublished":"2023-11-19T18:16:12.237Z","dateModified":"2023-11-19T18:18:51.295Z","url":"https://daily.dev/posts/vdAySJsnY#c-NlHhZbvC8","author":{"@type":"Person","name":"Kenneth Hoff","url":"https://daily.dev/betweennames","image":"https://avatars.githubusercontent.com/u/17124533?v=4"}}]} ```