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? — Arkellys
– Arkellys, Commented Jul 28, 2020 at 19:23

Quentin · Accepted Answer · 2020-07-28 19:23:53Z

1

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.

answered Jul 28, 2020 at 19:23

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1