Law of UX · Law of Proximity & Common Region

The Parent Selector That Does Everything

#:has()has

Style ancestors from child state with pure CSS.

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

.has-card:has(input:checked) {
  background: var(--mint);
  border-color: transparent;
  box-shadow: 0 0 80px rgba(29, 127, 83, 0.3);
}

.has-card:has(input:checked) .icon-box {
  background: #ffffff;
  border-color: transparent;
  scale: 1.2;
}

.has-card:has(input:checked) .icon-box:nth-child(1) {
  rotate: -15deg;
}
.has-card:has(input:checked) .has-text {
  color: #ffffff;
}