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])))

Generalizing to any given CSS `.selector`:

First match:

	:not(.selector ~ *)

Last match:

	:not(:has(~ .selector))

Middle match:

	:is(.selector ~ *):has(~ .selector)

Only match:

	:not(.selector ~ *):not(:has(~ .selector))

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

https://warpcast.com/darrylyeo/0x58b0c134