选择包含至少一个 UL 的 DIV 的 CSS 选择器（或 JavaScript，如果需要）答案

【问题标题】：CSS selector (or JavaScript if needed) for select DIV's which contain at least one UL选择包含至少一个 UL 的 DIV 的 CSS 选择器（或 JavaScript，如果需要）
【发布时间】：2013-09-23 12:12:38
【问题描述】：

假设我有这样的层次结构：

<div class="first_level">
  <div class="second_level_1">
    <div class="third_level_1">
      <div class="fourth_level_1">
        <ul><li></li><li></li></ul>
      </div>
      <div class="fourth_level_2">
        <div class="fifth_level_1">
        </div>
        <div class="fifth_level_2">
          <ul><li></li><li></li></ul>
        </div>
      </div>
    </div>
  </div>
  <div class="second_level_2">
    <ul><li></li><li></li></ul>
  </div>
</div>

我想选择所有这些 div，其中至少包含一个 ul。所以在上面的示例代码中，这将是 divs second_level_2、fourth_level_1 和 fifth_level_2 ..

我可以使用什么 CSS 选择器来获得这个结果？

编辑：

如果单独使用 CSS 不可能，您可以使用 JavaScript 提出答案，尽管由于我的实际代码的性质，我真的希望尽可能避免这种情况..

jsfiddle

【问题讨论】：

你不能，不能用 CSS。你需要使用 JavaScript； css 无法根据子元素选择父元素（Not even in CSS 4，在有人发布之前参考主题选择器）。
@DavidThomas 看起来 CSS4 有一个选择器用于此 E! > F
我知道在 CSS 中你不能根据子元素选择父母，但你可以从 parent > child .. 所以这个链接不能以某种方式使用吗？
@ced-b：认真的吗？您是否阅读我发布的链接..？是的，它存在，但它不在浏览器中使用的“快速选择器配置文件”中可用。我想我以某种方式链接到了错误的部分，请阅读这部分：Fast vs Complete Selector profiles。 Ahmad：你建议如何通过选择子元素来设置元素的父元素的样式？你到底想对他们做什么？
@ced-b 我知道有很多内容需要考虑，但总而言之，fast 选择器配置文件必须由符合 CSS4 的用户代理实现。它不包括主题指标

标签： html css css-selectors

【解决方案1】：

这里有两个选项 - 都有缺点，但你可以考虑一下：

您可以使用ul 手动向 div 添加第二个类：

<div class="fourth_level_1 div_with_ul_class">

注意：如果您在服务器上使用某种动态语言，例如 PHP，这实际上可以相当容易地实现，无需手动编码。

或者如果你想要动态，我推荐 jQuery：

$("div > ul").parent().addClass("div_with_ul_class");

【讨论】：

【解决方案2】：

父选择器在 CSS 中不可用，尽管有很多要求添加它。

jQuery 有一个不错的选择器，称为:has； http://api.jquery.com/has-selector/

$('div:has(ul)');

将是 jQuery 选择器。

【讨论】：