[csswg-drafts] [css-cascade-6] Is it possible to create a scoping boundary over sibling elements? (#7233)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] Is it possible to create a scoping boundary over sibling elements? ==
https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/#scoped-styles

> [Scoping limits](https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/#scoping-limit) can use the [:scope](https://www.w3.org/TR/selectors-4/#scope-pseudo) pseudo-class to require a specific relationship to the [scoping root](https://www.w3.org/TR/selectors-4/#scoping-root):
> ```css
> /* .content is only a limit when it is a direct child of the :scope */
> @scope (.media-object) to (:scope > .content) { ... }
> ```
> [Scoping limits](https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/#scoping-limit) can also reference elements outside their [scoping root](https://www.w3.org/TR/selectors-4/#scoping-root) by using [:scope](https://www.w3.org/TR/selectors-4/#scope-pseudo). For example:
> ```css
> /* .content is only a limit when the :scope is inside .sidebar */
> @scope (.media-object) to (.sidebar :scope .content) { ... }
> ```

The scoping proposal is mostly focussed on component based styling.

I think the weak scoping proximity feature that is part of the scoping proposal would also be useful for sibling selectors. I was not sure if this was also covered by the current specification.

`Example 3` seems to allow room for a scope with this definition :

```css
@scope (.media-object) to (:scope ~ .text-object) { ... }
```

---------

### Example :

Styling any paragraph elements that follow a certain heading element.

```css
h1 ~ p {
 color: red;
}

h2 ~ p {
 color: green;
}

h3 ~ p {
 color: blue;
}
```

```html
<h1>Main heading (h1)</h1>

<p>Red text</p>

<h2>Sub heading (h2)</h2>

<p>Green text</p>
<p>Green text</p>

<h3>Smaller heading (h3)</h3>

<p>Blue text</p>
<p>Blue text</p>

<h2>Sub heading (h2)</h2>

<p>Blue text, but intended green</p>
<p>Blue text, but intended green</p>
```

<img width="322" alt="Screenshot of example HTML and CSS described above showing how the general sibling selector in CSS also does not account for element proximity." src="https://user-images.githubusercontent.com/11521496/165245715-0a2815b7-a064-41c1-9b32-a0e7f20e6ce5.png">

Possibly we can write this CSS :

```css
@scope (h1) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
 p {
  color: red;
 }
}

@scope (h2) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
 p {
  color: green;
 }
}

@scope (h3) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
 p {
  color: blue;
 }
}
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7233 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 26 April 2022 07:44:24 UTC