Day 8: nesting :has()

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

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;
}

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

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-10-05T00:00:00+00:00) Day 8: nesting :has(). Retrieved from https://www.scien.cx/2022/10/05/day-8-nesting-has-2/

MLA

" » Day 8: nesting :has()." Manuel Matuzović | Sciencx - Wednesday October 5, 2022, https://www.scien.cx/2022/10/05/day-8-nesting-has-2/

HARVARD

Manuel Matuzović | Sciencx Wednesday October 5, 2022 » Day 8: nesting :has()., viewed ,<https://www.scien.cx/2022/10/05/day-8-nesting-has-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 8: nesting :has(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/05/day-8-nesting-has-2/

CHICAGO

" » Day 8: nesting :has()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/05/day-8-nesting-has-2/

IEEE

" » Day 8: nesting :has()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/05/day-8-nesting-has-2/. [Accessed: ]

rf:citation

» Day 8: nesting :has() | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/05/day-8-nesting-has-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.