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

wow, these selectors are a game changer! never thought of using them like this. thanks for sharing! 🙌 