Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 9 additions & 18 deletions css-cascade-6/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -314,11 +314,7 @@ Effects of ''@scope''</h4>
the ''@scope'' rule’s [=scoping root=],
including the [=featureless=] [=shadow host=]
when that host is the [=scoping root=].
The ''&'' selector is defined to represent
the selector representing the [=scoping root=]
(the <<scope-start>> selector),
or else '':scope'' if no selector was specified.

* The ''&'' selector is defined to behave as <code>:where(:scope)</code>.
* The [=cascade=] prioritizes declarations
with a [=scope proximity|more proximate=] [=scoping root=],
regardless of specificity or order of appearance
Expand Down Expand Up @@ -518,19 +514,11 @@ Scoped Style Rules</h4>
}
</pre>

While the '':scope'' or ''&'' selectors
can both refer to the [=scoping root=],
they have otherwise different meanings in this context:

: Differences in selector matching
:: The '':scope'' selector will only match the [=scoping root=] itself,
while the ''&'' selector is able to match any element
that is matched by the <<scope-start>> selector list.
: Differences in selector specificity
:: The '':scope'' selector has a specificity
equal to other pseudo-classes,
while the ''&'' selector has the specificity
equal to the most specific selector in <<scope-start>>.
Both the '':scope'' and ''&'' selectors
match the [=scope root=],
but with different [=specificity=]:
'':scope'' has as [=specificity=] of (0,1,0),
whereas ''&'' has a [=specificity=] of 0.
</div>

<h4 id="scope-limits">
Expand Down Expand Up @@ -773,6 +761,9 @@ Changes since the 21 March 2023 Working Draft</h3>
Significant changes since the
<a href="https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/">21 March 2023 Working Draft</a> include:

* Defined ''&'' to behave like <code>:where(:scope)</code>.
(<a href="https://github.com/w3c/csswg-drafts/issues/9740">Issue 9740</a>)

* Allowed [=declarations=] directly within ''@scope''.
(<a href="https://github.com/w3c/csswg-drafts/issues/10389">Issue 10389</a>)

Expand Down
18 changes: 11 additions & 7 deletions css-nesting-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -763,11 +763,6 @@ Nested ''@scope'' Rules</h4>
refers to the elements matched
by the nearest ancestor style rule.

For the purposes of the style rules in its body
and its own <<scope-end>> selector,
the ''@scope'' rule is treated as an ancestor style rule,
matching the elements matched by its <<scope-start>> selector.

<div class=example>
That is, the following code:

Expand All @@ -787,14 +782,19 @@ Nested ''@scope'' Rules</h4>

<pre highlight=css>
.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
.parent > .scope .content {
@scope (.parent > .scope) to (:where(:scope) .limit) {
:where(:scope) .content {
color: red;
}
}
</pre>
</div>

<div class=note>
The ''&'' selector behaves like <code>:where(:scope)</code>
in ''@scope'' rules.
</div>

<!-- Big Text: mixing

█ █ ████ █ █ ████ █ █▌ ███▌
Expand Down Expand Up @@ -1344,6 +1344,10 @@ will collapse into a single rule when serialized and parsed again.
Significant changes since the
<a href="https://www.w3.org/TR/2023/WD-css-nesting-1-20230214/">Feb 14, 2023 Working Draft</a>:

* The ''<scope-start>'' selector of a ''@scope'' rule
no longer acts as the parent rule for nesting.
(<a href="https://github.com/w3c/csswg-drafts/issues/9740">Issue 9740</a>)

* Clarified that the [=nesting selector=] is allowed to match featureless elements.

* Switched ''&div'' back to being invalid;
Expand Down