Clarify CSS nesting concatenation section#44303
Open
vamshikrishnaramasamy wants to merge 1 commit into
Open
Conversation
Separate the Sass input/output from the CSS-nesting result, add an explicit example showing the browser ignores the invalid nested rule, and tighten the explanation of why the type selector must come first. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
vamshikrishnaramasamy
requested review from
hamishwillee
and removed request for
a team
github-actions
Bot
added
Content:CSS
Contributor
|
Preview URLs (1 page) External URLs (2)URL:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #44186.
The Concatenation section on the Using CSS nesting page mixed the Sass input and Sass output in one
example-badblock and never showed what a browser actually does with&__child-elementin real CSS nesting. This reworks it to:Concatenation (is not possible)→Concatenation is not possible).example-bad).example-badCSS-nesting block making it explicit that the browser ignores the invalid nested rule.__child-elementtype selector ends up after the nesting selector, which is invalid, so the nested rule is discarded while the surrounding.componentrule is unaffected.I confirmed the behavior in Chrome via the CSSOM: with
&__child-element, the nested rule is dropped from the stylesheet entirely and only.componentremains;element&parses as a valid compound selector. This matches the existing claim on the page — the change is purely for clarity, not a behavioral correction.