CSS - When input:checked, change another class?

Question

This is my class -

.swatch input:checked + label {
 background-color: #fff;
} 




 .swatch {
    Change something here when above class is active.
 }

Is there any way to do this? I am using liquid templating if that could be of assistance.

Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Arkellys, Jul 28 '20 at 19:23

score 1 · Answer 1 · answered Jul 28 '20 at 19:23

No.

It is possible for one ruleset to affect another using CSS variables…

body {
  --example: yellow;
}

input:checked+.swatch {
  --example: brown;
}

.swatch {
  background: var(--example);
}

<input type="checkbox">

<div class="swatch">
  Hello, world
</div>

… but that would only allow the variable to be set on the input, it's descendant (if inputs could have such things) or a later sibling.

1 Answers1