The browser is disregarding the CSS rule set for the checkboxes

Question

The browser is disregarding the CSS rule set for the checkboxes

I am experiencing an issue with a div called "popup" that is supposed to display a popup menu with a checkbox labeled "more" for getting additional items. However, changing the properties of "#popup" or "overflow-y: scroll;" does not have any effect as the browser seems to be ignoring these rules.

#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>

html css markdown

Answer 1

Answer №1

According to j08691's comment, the use of ~ as a general sibling selector won't work because #popup is not a sibling of #popup_more_checkbox. To achieve your desired outcome, consider using the new CSS selector :has():

#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

According to j08691's comment, the use of ~ as a general sibling selector won't work because #popup is not a sibling of #popup_more_checkbox. To achieve your desired outcome, consider using the new CSS selector :has():

#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 3

Answer №2

According to a reliable source at MDN:

Using the general sibling combinator

If you need to target elements that are siblings of another element but not necessarily directly following it, then the general sibling combinator (~) is what you're looking for. For example, if you want to select all <img> elements that come after any <p> elements, you would use: p ~ img

However, this is not the scenario with

#popup_more_checkbox:checked ~ #popup

.

Answer 4

According to a reliable source at MDN:

Using the general sibling combinator

If you need to target elements that are siblings of another element but not necessarily directly following it, then the general sibling combinator (~) is what you're looking for. For example, if you want to select all <img> elements that come after any <p> elements, you would use: p ~ img

However, this is not the scenario with

#popup_more_checkbox:checked ~ #popup

.

The browser is disregarding the CSS rule set for the checkboxes

Answer №1

Answer №2

Using the general sibling combinator

Similar questions

The title for beforeShowDay in bootstrap-datepicker is not functioning as expected

What is the best method for gracefully opening external links in a reusable new tab?

What is the best way to ensure that my content is perfectly centered on my webpage?

The enchanting world of CSS background scrolling animations

Error loading .OBJ files in Three.js on Azure, but works fine locally

Is the embedded audio player not showing up on the screen?

Unable to load CSS styles from SCSS when rendering the view

Tips for evenly and fully stretching a set number of horizontal navigation items across a designated container

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

How to assign the 'src' attribute to an HTML element using Node.js

Perform mathematical operations on numbers using jQuery based on their index

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Tips for designing a CSS border that remains consistent in size throughout

Calculating grand total upon form initialization

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Flick user media cards left or right to uncover the following one

Guide to concealing List elements from the Search Filter when the search input field is emptied

CSS transitions that smoothly adjust with min-width media queries

Is there a way I can ensure that two elements have identical heights?