Why does checkbox not change the color style of the div element?

Question

React (HTML)

<div className={"OK"}>OK</div>
<input type="checkbox" id={"MainPage-checkbox-menu"} />
<label htmlFor={"MainPage-checkbox-menu"}></label>

CSS

#MainPage-checkbox-menu:checked ~ .OK {
  color: #8ef6ad;
}

codesandbox.io

I seem to be doing everything right but the checkbox does not change the color style of the div element. How to make the checkbox change the color of the div element ?

Place your "ok" class element after the "MainPage-checkbox-menu" . Its is because the order of selectors in css — Daniya Niazi, Oct 16 '21 at 15:50
@DaniyaNiazi you should add your comment as an answer so it can be accepted; as you note, the ~ css operator requires that the left hand element precedes the right hand one. https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean — ltiong_sh, Oct 16 '21 at 16:08

score 1 · Answer 1 · answered Oct 16 '21 at 16:18

According to your CSS selectors, you need the element with the class OK to be placed below the :checked element. So your markup should look like this:

export default function App() {
  return (
    <div className="App">
      <input type="checkbox" id={"MainPage-checkbox-menu"} />
      <div className={"OK"}>OK</div>
      <label htmlFor={"MainPage-checkbox-menu"}></label>
    </div>
  );
}

Why does checkbox not change the color style of the div element?

1 Answers1