CSS：如果所有子元素都隐藏，则隐藏父元素

Question

我有一个包含分组的列表，并使用CSSOM动态过滤文本字段中的内容。这是一种仅使用CSS实现“搜索”的方法。

不幸的是，当过滤器过滤掉所有内容时，组容器仍然保持可见状态。我需要以某种方式使用CSS设置display: none，否则我需要添加大量JS来控制它们。

这是否可能？我知道这有点困难，但是否有一种选择器可以选择其子元素（符合某个选择器）上全部必须具有所选样式的元素？

如果我大大放松约束条件，这是否可能是一种选择器，它选择其子元素（符合某个选择器）上全部必须具有特定类的元素？

- Steven Lu

---

@VadimOvchinnikov，iff是一个数学概念https://en.wikipedia.org/wiki/If_and_only_if，而不是打字错误。但我对这种编辑方式感到满意。 - Steven Lu

不知道这一点。但是“if”对于大多数人来说更加熟悉。如果您不同意，请随意编辑您自己的问题。 - Vadim Ovchinnikov

很有趣，因为我在写这个的时候想到了“如果我只是写正常的‘if’语句，会不会更好呢？”但是我已经输入完毕了。 - Steven Lu

Answer 1

不，仅通过CSS是不可能的：

1. 没有父级选择器。
2. 除非你只使用内联CSS隐藏元素，否则没有可见性选择器，除了像 :not([style*="display:none"]):not([style*="display: none"]) 这样的东西。
3. 没有CSS方法可以知道所有子元素是否满足某些条件。

---

这个问题只能通过纯JS循环和条件或使用jQuery选择器，例如.parent:not(:has(:visible))来解决。

- Vadim Ovchinnikov