Target specific element if it contains another element only with CSS

Question

I have the following HTML setups and I'm trying to target the class="chosen-with-children" with CSS2 or CSS3 only if the div also contains the class="children". Any idea how to solve this? I hope this is possible.

Thanks in advance.

1.

<div class="wcapf-layered-nav">
    <ul>
        <li class="chosen-with-children">
            <a class="" href=""></a>
        </li>
    </ul>
</div>

2.

<div class="wcapf-layered-nav">
    <ul>
        <li class="chosen-with-children">
            <a class="" href=""></a>

            <ul class="children">
                <li class="chosen">
                    <a class="" href=""></a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Not possible with pure CSS, you would have to use JavaScript. See: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1 — delinear, Dec 12 '17 at 12:46

score 0 · Accepted Answer · answered Dec 12 '17 at 12:51

It is not possible using pure CSS, as explained here.

If you wanted to use jQuery you could do this:

$(".chosen-with-children").each(function() {
  if($("ul", this).hasClass("children")) {
    $(this).addClass("has-child-class");
  }
})

.chosen-with-children.has-child-class > a {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wcapf-layered-nav">
  <ul>
    <li class="chosen-with-children">
      <a class="" href="">Link 1</a>

      <ul class="children">
        <li class="chosen">
          <a class="" href="">Link 1a</a>
        </li>
      </ul>
    </li>
    <li class="chosen-with-children">
      <a class="" href="">Link 2</a>
    </li>
  </ul>
</div>

Target specific element if it contains another element only with CSS

1 Answers1