Search code examples
htmlcsscss-selectorscssom

Hide parent if all children are hidden

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 bit 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?

Solution

  • No, it's impossible only via CSS:

    1. There is no parent selector.
    2. There is no visibility selector, except something like :not([style*="display:none"]):not([style*="display: none"]) if you hide elements only using inline CSS.
    3. There is no CSS way to know if all children satisfy some condition.

    This can be solved only using pure JS loops and conditions or via jQuery selectors like .parent:not(:has(:visible)).