Day 8: nesting :has()

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The :has() pseudo-class cannot be nested; :has() is not valid within :has().

<div>
  <p>
    <strong>I have a red and blue border in supporting browsers.</strong>
  </p>
</div>
/* valid */
div:has(p) {
  border: 4px solid red;
}

/* valid */
p:has(strong) {
  border: 4px solid blue;
}

/* invalid */
div:has(p:has(strong)) {
  border: 4px solid green;
}

I have a red and blue border in supporting browsers.

Using a combined selector instead of nesting :has() is valid.

/* valid */
div:has(p strong) {
  border: 4px solid green;
}

I have a green border in supporting browsers.

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS