- From: Bramus! via GitHub <sysbot+gh@w3.org>
- Date: Tue, 22 Nov 2022 16:59:24 +0000
- To: public-css-archive@w3.org
Extending on @johannesodland’s reply above, I’ve created several selectors leveraging `:has()`, `:nth-child` and `:last-child` to count children:
```css
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
outline: 1px solid red;
}
/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
outline: 1px solid red;
}
/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
outline: 1px solid blue;
}
/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
outline: 1px solid green;
}
/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
outline: 1px solid yellow;
}
```
Post with the details: [https://brm.us/css-has-child-count](https://brm.us/css-has-child-count)
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5694#issuecomment-1323983662 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 22 November 2022 16:59:26 UTC