CSS :has() Examples

Select elements anywhere on the page if a specific selector exists.

In this example if the checkbox is checked / unchecked, blur / unblur the answers and change the contents of the checkbox label.

body:has(input.blur-answers:checked) .answer {
  filter: blur(3px);

body:has(input.blur-answers:checked) .visibility-label::before {
  content: "Hide "

body:not(:has(input.blur-answers:checked)) .visibility-label::before {
  content: "Show "

What is the answer to life the universe and everything?


Which of the following HTML elements are fake: bdi, cite, wbr, sec?


How could you implement CSS :has with JavaScript?

document .querySelector('.thing') .closest('.parent');

In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them?