html - 用于选择至少包含一个 UL 的 DIV 的 CSS 选择器(或 JavaScript，如果需要)

Question

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

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

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

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

编辑:

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

jsfiddle

Answer 1

这里有两个选项 - 都有缺点，但您可以考虑它们:

您可以使用 ul 手动将第二个类添加到 div:

<div class="fourth_level_1 div_with_ul_class">

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

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

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