6

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?

Vadim Ovchinnikov
  • 10,848
  • 4
  • 43
  • 73
Steven Lu
  • 36,733
  • 50
  • 179
  • 328
  • @VadimOvchinnikov the iff is a mathematical notion https://en.wikipedia.org/wiki/If_and_only_if and not a typo. But I'm fine with the edit this way. – Steven Lu Jul 23 '17 at 16:59
  • Didn't know that. But "if" is much more familiar for most people. Feel free to edit your own question if you disagree. – Vadim Ovchinnikov Jul 23 '17 at 17:00
  • It's interesting that you edited it because I thought to myself when I wrote it "Would it just be better if I just wrote the normal 'if'?" But I had already typed it out. – Steven Lu Jul 23 '17 at 21:13

1 Answers1

7

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

Vadim Ovchinnikov
  • 10,848
  • 4
  • 43
  • 73