CSS: Hide parent if all children are hidden

Question

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?

Answer 1

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)).