Law of UX · Law of Proximity & Common Region

The Parent Selector That Does Everything

#:has()has

Style any ancestor based on child state. The checkbox controls the entire card — background, shadows, rotation, spacing. Zero JavaScript.

Why it works: Law of Proximity & Common Region — one control (checkbox) visually groups and updates the whole card, so the relationship is obvious.

live_demo

code

.card:has(input:checked) {
  background: var(--mint);
  box-shadow: 0 0 80px #34d39950;
}

.card:has(input:checked) .box {
  scale: 1.2;
  rotate: -15deg;
}