Content
@
0 reply
0 recast
0 reaction
Darryl Yeo đ ïž
@darrylyeo
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])))
3 replies
4 recasts
15 reactions
Steve
@sdv.eth
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)
1 reply
0 recast
1 reaction
Darryl Yeo đ ïž
@darrylyeo
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âŠ
2 replies
2 recasts
1 reaction
Darryl Yeo đ ïž
@darrylyeo
âŠokay, holy moly, there actually is a built-in `:nth-child(_ of <selector>)` as of last year đ€Ż The things you stumble across on MDN that no one ever tells you about⊠https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#the_of_selector_syntax https://caniuse.com/css-nth-child-of
0 reply
0 recast
3 reactions
Steve
@sdv.eth
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) đ€
1 reply
0 recast
1 reaction
