css rule for checkbox is being ignored by browser

February 13, 2023

I have a div named "popup" which is used to show popup menu and has checkbox with label "more" which is used to get some more items for menu, it displays additional list.

Even if i change "#popup" or "overflow-y: scroll;" – nothing has changed, browser ignores this rule.

#popup {
  ... height: 13em;
  overflow: hidden;
  ...
}

#popup_more {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup_more {
  visibility: visible;
}

#popup_more_checkbox:checked~#popup_more_checkbox_label {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup {
  overflow-y: scroll;
}

<div id="popup">
  <ul id="popup_list">
    ...
  </ul>
  <input id="popup_more_checkbox" type="checkbox" style="display: none;" />
  <label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
  <div id="popup_more">
    <ul id="popup_more_list">
      ...
    </ul>
  </div>
</div>

>Solution :

As j08691 commented, ~ is the general sibling selector and #popup isn’t a sibling of #popup_more_checkbox. For what you’re trying to achieve use the new :has() selector in CSS:

#popup {
  ... height: 13em;
  overflow: hidden;
  ...
}

#popup_more {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup_more {
  visibility: visible;
}

#popup_more_checkbox:checked~#popup_more_checkbox_label {
  visibility: hidden;
}

#popup:has(#popup_more_checkbox:checked) {
  overflow-y: scroll;
}

<div id="popup">
  <ul id="popup_list">
    ...
  </ul>
  <input id="popup_more_checkbox" type="checkbox" style="display: none;" />
  <label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
  <div id="popup_more">
    <ul id="popup_more_list">
      ...
    </ul>
  </div>
</div>