html - 如果隐藏所有其他 child ，如何将类(class)应用于 child ？

Question

我知道这对于 jQuery 来说非常简单，尽管我寻求的是纯 CSS 解决方案(如果可能的话)。

我有一个 div 列表，最后一项是错误消息。我有一个简单的过滤系统，如果没有与所选过滤器匹配的 div，我想显示错误的 div。

HTML 结构:

<div id="listHolder">
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter2"]"></div>
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter4"]"></div>
    <div class="errorItem">Nothing to display here</div>
</div>

我想要实现的目标:

如果一个 div 不匹配任何过滤器，我的过滤器插件会为它们提供 inactive 类。因此，我需要检查所有具有 listItem 类的 div 是否也具有 inactive 类，以便为 errorItem 类提供 显示: block 。

仅供引用，我正在为我的列表和过滤系统使用 Wookmark 插件。我也在使用 LESS。

Answer 1

当然有可能:http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/

如果上一个元素没有隐藏，你想隐藏最后一个元素:

.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

Demo使用JS只是为了切换inactive类，而不是errorItem的显示逻辑。

不过，我仍然同意这里所有聪明人的观点:JS 可能会做得更好。无论如何，您已经在使用它了。