A Selection of Complex CSS Selectors

While working on this site redesign I've had the opportunity to learn a bit about modern CSS. (The last time I redesigned the site was, I think, in 2011.) (Holy cow, 14 years ago? Crazy.)

Yes, flexbox and grid are amazing and finally make CSS usable for decent, responsive layouts without resorting to hacks upon hacks. But that's not what I'm here to marvel at.

You can do crazy things with CSS these days! Here are some (context-free) selectors I've written in the theme for this blog:

a[href^='https://github.com/'] .kg-bookmark-icon, a[href^='https://www.github.com/'] .kg-bookmark-icon { /* ... */ }

.cdz-card.kg-bookmark-card:not(:has(* > .kg-bookmark-title)) .kg-bookmark-content { /* ... */ }

.cdz-card.kg-bookmark-card a.kg-bookmark-container:hover .kg-bookmark-metadata > span:nth-of-type(1) { /* ... */ }

.gh-feed.cdz-cards .gh-card div.gh-card-link:not(:has(* > .kg-bookmark-card)) { /* ... */ }

The ability to combine filtering elements by attribute values, :not, :has, and :nth-of-type and friends makes stuff possible that I'd need to find workarounds for 15 years ago.