Jss: General sibling combinator (~)

Created on 21 Aug 2019  路  1Comment  路  Source: cssinjs/jss

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
  }
});
question

Most helpful comment

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

>All comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oliviertassinari picture oliviertassinari  路  4Comments

janhartmann picture janhartmann  路  5Comments

antoinerousseau picture antoinerousseau  路  3Comments

Telokis picture Telokis  路  3Comments

pofigizm picture pofigizm  路  5Comments