Re: [csswg-drafts] [css-values] Proposal: add sibling-count() and sibling-index() (#4559)

• From: Andrew Bone via GitHub <sysbot+gh@w3.org>
• Date: Mon, 22 Apr 2024 12:24:11 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2069262700-1713788649-sysbot+gh@w3.org>

With the names, are we settled on sibling now? Would repeating the `nth` syntax here lead to confusion with the  pseudo-classes?

I was thinking something like `nth-current` and `nth-count` would make sense if you're familiar with the `nth` pseudo-classes.

```html
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item" hidden></div>
  <div class="item count"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
```

```css
.count::after {
  content: nth-current(); /* 7 */
  content: nth-count(); /* 13 */
  content: nth-current(.count); /* 1 */
  content: nth-count(.count); /* 1 */
  content: nth-current(:not([hidden])); /* 6 */
  content: nth-count(:not([hidden])); /* 12 */
}

.item {
  /* gradually get more saturated as you reach the last item */
  background-color: hsl(9 calc(nth-current(:not([hidden])) / nth-count(:not([hidden])) * 100%) 64%);
}
```

-- 
GitHub Notification of comment by Link2Twenty
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4559#issuecomment-2069262700 using your GitHub account


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

Received on Monday, 22 April 2024 12:24:12 UTC