- From: Johannes Odland via GitHub <sysbot+gh@w3.org>
- Date: Mon, 15 Aug 2022 10:18:15 +0000
- To: public-css-archive@w3.org
Having a `:nth-sibling()` selector would be really nice.
> Maybe `:nth-sibling(1 of .sibling / .target)` ?
Is there any reason `.sibling` can’t be on the left side like the other sibling selectors?
```css
.sibling:nth-sibling(1 of .target)
```
Say you wanted to style every first paragraph after a heading, even if there is other elements between:
```css
h2:nth-sibling(1 of p) {
…
}
```
```html
<h2>Heading</h2>
<img />
<p>This paragraph should get a custom style.</p>
<p>This paragraph should be unaffected.</p>
```
It would also be useful if it was possible to limit how far the selector applies with another selector and not just `an+b`.
Say that you want to apply different styles to elements after even and odd headings:
```css
/* The sibling selector applies only until the next heading */
:nth-child(odd of h2):nth-sibling(n of p until h2) {
color: green;
}
:nth-child(even of h2):nth-sibling(n of p until h2) {
color: blue;
}
```
```html
<h2>Odd Heading</h2>
<img />
<p>Paragraphs after odd headings should be green.</p>
<p>…</p>
<h2>Even Heading</h2>
<img />
<p>Paragraphs after even headings should be blue.</p>
<p>…</p>
```
--
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3813#issuecomment-1214857171 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 15 August 2022 10:18:17 UTC