Question 45443 in Html Question posted in
Some basic documentation can be found here.

css rule for checkbox is being ignored by browser – Html

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>
Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search