Javascript：如何在 jss 中使用相邻兄弟选择器<input type="radio"> // 点击时改变颜色

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>