General sibling combinator (~)

[StudioSpindle]

Is it possible to target an general sibling as described in: https://css-tricks.com/child-and-sibling-selectors/#article-header-id-2

Outcome is the possibility to target a general sibling.

Example of the general sibling combinator: https://jsfiddle.net/sy4fjv5e/3/

Use-case: I have a use-case where in a component there is a checkbox which can either be on or off. The sibling of this component is getting styled wheter or not the checkbox is on or off. This checkbox itself is hidden.

<div>
<input type="checkbox" className={classes.checkbox} />
<div className="{classes.toggler}"></div>
</div>

const styles = theme => ({
  checkbox: {
    // some CSS to hide this checkbox visually (but not for screenreaders)
  }
  toggler: {
    // some CSS to have an off state
  }
  checkbox:checked ~ toggler {
    // some CSS to have an on state
  }
});

[HenriBeck]

const styles = theme => ({
  checkbox: {
    // some CSS to hide this checkbox visually (but not for screenreaders)
    '&:checked ~ $toggler': {
    },
  }
  toggler: {
    // some CSS to have an off state
  }
});

For more details: https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.24