"If I were to divide CSS evolutions into categories, then last year was probably the year that ended with animations and colors getting better; This year, the end of the year seems to be about those ease-of-life features. We had one of those not that long go with :has(), but with things such as sibling-count, sibling-index, functions, and conditionals, the way we write CSS might just change for the better once again."
"sibling-index() returns a number representing the position of the current element relative to all its sibling elements sibling-count() returns a number representing the total number of siblings of the element on which it is used, including itself. That's it, the only tricky one is that sibling-count() also counts itself. I will be going over 4 demo's and some extras in the end."
Recent CSS additions focus on ease-of-life features such as sibling-index() and sibling-count(), alongside functions and conditionals that change how CSS is written. sibling-index() returns the position number of an element among its siblings. sibling-count() returns the total number of siblings including the element itself, with the notable detail that it counts the element. These selectors are already implemented in Chromium browsers. Practical uses include creating staggered animations without inline custom properties by deriving delays from sibling positions. Additional demos explore combining sibling functions with other CSS features to simplify layouts and conditional styling.
Read at Utilitybend
Unable to calculate read time
Collection
[
|
...
]