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?

42

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

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?