:checked inside :has() lets the page react to a tick.

:checked matches a tick box or a radio button, the round kind where picking one unticks the rest, while it is ticked. On its own it can only style that small box.

Inside :has() it reaches much further. .option:has(:checked) highlights the whole row around the ticked box, and form:has(#gift:checked) can reveal a gift message field. No script needed.

Here a box starts ticked when its tag includes the word checked. Click the options in the preview to watch the styles follow.

<label class="option"><input type="radio" name="plan" checked> Monthly</label>
<label class="option"><input type="radio" name="plan"> Yearly</label>

.option {
  display: block;
  padding: 12px;
  border: 2px solid #e5e7eb;
}
.option:has(:checked) {
  border-color: #0f766e;
  background-color: #e0f2f1;
}