Search code examples
csscheckboxcss-selectorspseudo-class

Using :checked to toggle CSS for an element anywhere on the page?

I have recently heard of a method that uses a checkbox to style an element adjacent to it, using:

.checkbox-whatever:checked + .toggling-element{
 Some css
}

Now I'd like to do the same thing but with a piece of css being applied globally and not just to the next element. So basically while the checkbox is checked the css will behave as if it was:

.toggling-element{
Some css
}

Then it will apply to all elements with class "toggling-element", not just an element adjacent to the checkbox.

Is that possible?

Solution

  • Assuming your .toggle-element elements aren't all siblings of your .checkbox-whatever:

    No, you can't do this without JavaScript because CSS has no way of selecting parent elements.

    I think it's safe to assume you wouldn't structure your markup that way; it'd be far too impractical.