Skip to content

Instantly share code, notes, and snippets.

@mohnatus

mohnatus/style-by-children-count.css

Created December 11, 2022 14:36
Show Gist options
  • Save mohnatus/46574e416a224887763d4d7075961b5a to your computer and use it in GitHub Desktop.
Save mohnatus/46574e416a224887763d4d7075961b5a to your computer and use it in GitHub Desktop.
Download ZIP
Style a parent element based on its number of children
Raw
style-by-children-count.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;
}
@mohnatus
Copy link
Author

https://www.bram.us/2022/11/17/style-a-parent-element-based-on-its-number-of-children-using-css-has/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment