css rule for checkbox is being ignored by browser [duplicate] - html

Question

This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS parent selector?
(33 answers)
Closed 6 days ago.
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>

Answer 1

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>

Answer 2

From MDN:
General sibling combinator
If you want to select siblings of an element even if they are not directly adjacent, then you can use the
general sibling combinator (~). To select all <img> elements that
come anywhere after <p> elements, we'd do this: p ~ img
And that's not the case in #popup_more_checkbox:checked ~ #popup.