This is a fantastic tutorial. I have read lots about :has, and have used it a bunch, too, but this article opened my eyes to its potential.

yup, :has is a game changer, would not be able to do my structural css editor without it.

I wrote a pure-css way to annotate the margin shorthand from

margin: 1px 2px 3px 4px

->

margin: top: 1px right: 2px bottom: 3px left: 4px

The following selector traverses the AST & checks if the margin is of that form, with the use of a little ::before and content you can do some really wild things.

[data-attr="name"]:has([data-value="margin"])
  + [data-attr="expr"]
  > [data-kind="multi_part_value"]
  > [data-attr="parts"]:has(:nth-child(4))

figure:has(figcaption) figcaption

Is the same as figure figcaption unless you’re selecting for “browser supports :has”.

The selector reads as “a figcaption which is the descendent of a figure which has a figcaption as a descendent”. But figcaption that was the descendent of a figure which doesn’t have a figcaption as a descendent would be paradoxical.

Oh, I never considered using it with nth-of-type and such. That’s an interesting mix. :not only lets you put a simple selector inside, has letting you use those is kinda hardcore. And browser support finally coming, golly.