Tom Hanks
Tom Hanks

Reputation: 614

CSS - When input:checked, change another class?

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.

Upvotes: 0

Views: 1793

Answers (1)

Quentin
Quentin

Reputation: 943561

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.

There is no parent selector.

Upvotes: 1

Related Questions