Testing HTML With Modern CSS

I won’t dilute Heydon’s article by trying to summarise it, but if you’re similar to me by thinking “there’s gotta be something more powerful that :has() can do for us”, then Heydon has some answers to that.

Take this rule for example.

label:not(:has(:is(input, output, textarea, select))):not([for]) {
  outline: var(--error-outline);
  --error-unassociated-label: "The <label> neither uses the `for` attribute nor wraps an applicable form element";
}

This rule determines if a <label> has a form child element or has a for attribute. If not, the <label> shouldn’t be there. We couldn’t do this level of selecting pre-:has() and using this capability to test that your HTML markup is in good shape is genius. This context is a fantastic use of CSS Custom Properties too.

Heydon might well have found me a use for Cascade Layers too, which I honestly thought would never happen…

Advert