1

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>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
AndrewBersh
  • 21
  • 2
  • 2
    `~` is the general sibling selector and `#popup` isn't a sibling of `#popup_more_checkbox` – j08691 Feb 13 '23 at 21:08

2 Answers2

0

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>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
0

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.

KΣVIП
  • 21
  • 4