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
}
});
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
Most helpful comment
For more details: https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.24