Re: [csswg-drafts] [selectors-4] New selector based on the amount of child elements (#5694)

> Is there any chance you could elaborate of what particular styling changes you'd apply based on the number of child elements? The thing I can think of is stuff like changing the width of the parent based on number or such, but that seems brittle / repetitive and better suited by stuff like flex / grid / tables / inline-block etc...

@emilio I have several use cases but I will elaborate on my particular one I'm currently working on. I'm trying to create CSS framework turning HTML data `<table>` into a chart using pure CSS without any JS (for more details checkout [ChartsCSS.org](https://chartscss.org/charts/column/)).

It is very hard to create a [radar chart](https://en.wikipedia.org/wiki/Radar_chart) with pure CSS in addition don't know how many `<tr>` elements the developer will provide. To simplify the explanation think of `clip-path` with the help of [clippy](https://bennettfeely.com/clippy/):

![Clippy-CSS-clip-path-maker](https://user-images.githubusercontent.com/576623/98176068-82cf0b00-1f00-11eb-8463-d8a7d1d21b51.png)

```css
/* Triangle */
tbody:nth-children(3) {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Rhumbus */
tbody:nth-children(4) {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Pentagon */
tbody:nth-children(5) {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* Hexagon */
tbody:nth-children(6) {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Heptagon */
tbody:nth-children(7) {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/* Octagon */
tbody:nth-children(8) {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/* Nonagon */
tbody:nth-children(9) {
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
/* Decagon */
tbody:nth-children(10) {
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
```

This is not the final solution that I will use in the framework but it demonstrates the use-case of conditional design based on the total number of child elements. To do the same with alternative methods require much more code with different thinking.

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


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

Received on Wednesday, 4 November 2020 22:54:43 UTC