Link tags: :has

Using :has() as a CSS Parent Selector and much more | WebKit

A terrific tour of just some of the fantastic ways you can use :has() in CSS.

The section on using it with sibling selectors blew my mind:

How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.

h2:has(+ p) { margin-bottom: 0; }

Amazing.

Solving “The Dangler” Conundrum with Container Queries and :has() - daverupert.com

The algorithm I’m going after is pretty simple: If the grid of items has an odd number of items, then make the first item full-width. But CSS can’t do logic… right? Well… hold my proverbial beer.