Menu
I have a list with groups in it, and use CSSOM to dynamically filter the contents using a text field. This is a way to implement a "search" using only CSS.
Unfortunately when the filter filters everything out, the group containers still remain visible. I'd need to also set display: none onto them using CSS somehow, otherwise I need to add a bunch of JS to control them.
Is this remotely possible? I know this is a big of a long shot, but is there a selector that can select elements whose children (fitting some selector) all must have a style selected on them?
Is it even possible if I greatly relax the constraints, where this might be a selector that selects elements whose children (fitting some selector) all must have a particular class?
213
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.
A child selector matches all child elements of a specified element. It is composed of two or more selectors that are separated by ">". This syntax selects all child elements.
There is currently no way to select the parent of an element in CSS in a way that works across all browsers.
No, it's impossible only via CSS:
:not([style*="display:none"]):not([style*="display: none"]) if you hide elements only using inline CSS.This can be solved only using pure JS loops and conditions or via jQuery selectors like .parent:not(:has(:visible)).
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
