Re: [csswg-drafts] [css-values] Proposal: `children-count()` function (#11068)

I really like the possibility of doing both: counting the total number of items in the item and also in their parent. However, I feel like that's still limiting, why can't we count the number of items from any element and also decide which items get counted? 

Take the following HTML as an example:

```html
<div class="total"></div>

<ul>
 <li class="dairy">Milk</li>
 <li>Eggs</li>
 <li class="dairy">Cheese</li>
 <li class="dairy">Yogurt</li>
 <li>Bacon</li>
 <li>Bread</li>
</ul>
```

If I wanted to count all `li` elements, `sibling-count()` would force me to count the items from the item, `children-count()` from the parent, and there isn't a way to get the count from the `.total` element or any element outside of the parent. Alternatively, if I just want to count the elements of class `.dairy`, I couldn't. 

I feel like adding more functions for each case is counterintuitive, so why there shouldn't be a general `count()` function that takes as an argument the selector and returns as an integer the total items?

```css
count(ul > li) /* returns 6 */
count(ul > .dairy) /* returns 3 */
```

Based on the first examples by Adam Argyle here #4559, it could be changed from:

```css
ul > li {
  background-color: hsl(sibling-count() 50% 50%);
}
```

to:

```css
/* Changes the li color depending on how many .dairy elements are */
li {
  background-color: hsl(count(ul > .dairy) 50% 50%);
}

/* Changes the .total element color depending on how many li elements are */
.total {
  background-color: hsl(count(ul > li) 50% 50%);
}

/* We could have a keyword to go by the selector from where it's being called */
ul > li {
  background-color: hsl(count(selector) 50% 50%);
}
```

Applying a similar approach to the `sibling-index()` would have a lot more nuance, since it depends on the selector from where it's been called, but I think it should still be possible to get the index in a sibling group of the same class. Similar to what `:nth-of-type` does 





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


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

Received on Tuesday, 17 December 2024 14:59:26 UTC