reactjs - Javascript: How to use adjacent sibling selector in jss with <input type=radio> // change color when clicked

Question

I am trying to change the color of the label on a radio button in jss when it is clicked. This is what I have so far in Form.jsx:

<section className={classes.buttons} data-toggle="buttons">
  <label className={classes.btn}>
    <input type="radio" name="options" id="option1" checked/>
    <span>9th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option2"/> <span>10th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option3"/> <span>11th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option4"/> <span>12th grade</span>
  </label>
</section>

In my formStyles.js file,

    buttons : {
        display: 'grid',
        gridGap: '50px',
        gridTemplateColumns: 'auto auto',
        background: 'rgba(255 , 255, 255, 0.25)',
        padding: '30px',
        margin: '30px 100px 10px 100px', 
        zIndex: '1',
        
        
        "& input[type = radio]": {
            opacity: '0',
            position: 'fixed',
            width: '0',
        
        "&:checked &span"  : {
            display: 'none',
            color: 'blue',
            fontSize: '30px',
            
           },
        },
        "& label": {
            backgroundColor: '#BC98EE',
            zIndex: '2',
            color: 'white',

        },
    },

It works only when I do "&:checked" but not when I add "&span". In fact, it does not run anything under "&:checked &span" when I add "&span". Any suggestions?

Answer 1

The span is a sibling of the checked input, not a descendant.

See: Adjacent Sibling Combinator

.buttons {
  padding: 30px;
}

.buttons input:checked+span {
  color: blue;
}

<section class="buttons">
  <label>
      <input type="radio" name="options" id="option1" checked />
      <span>9th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option2">
      <span>10th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option3"/>
      <span>11th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option4" />
      <span>12th grade</span>
  </label>
</section>