Frontend

Useful CSS child selectors for when siblings may be `[hidden]`:

First visible child:

	> :not(:not([hidden]) ~ *)

Last visible child:

	> :not(:has(~ :not([hidden])))

Middle visible child:

	> :is(:not([hidden]) ~ *):has(~ :not([hidden]))

Only visible child:

	> :not(:not([hidden]) ~ *):not(:has(~ :not([hidden])))

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

I love me some quirky nested css selectors as the next person, but would argue these are not ideal for anything beyond hotfixes!

- hard to read
- not performant, especially with large DOM trees
- seems like a bandaid to a larger problem (overly complex components)

father, husband, css golfer, ux engineer, silently defining variables as /sdv sdv.wtf

Would love to see this in action! Seems quite thought out, looks interesting. My laziness would try to just use the :empty selector (assuming it's appropriate) 🤓

Motivating use case for me is transitioning heights and margins of hidden elements to zero while also accounting for margin “collapsing” behavior. Basically, if a hidden child is flanked on both sides by visible siblings with margin, it should offset one of those with negative margin in its “outro” transition so there is no visual break once it leaves the flow and the siblings’ margins collapse.

But yes, fair points – these selectors are situationally useful, performant the way regex lookahead assertions are performant, and effectively a polyfill hack for when a serious “nth of selector” proposal hopefully eventually lands in CSS…