Target spezifische Element, wenn es ein anderes Element nur mit CSS enthält

Question

Ich habe die folgenden HTML-Setups und ich versuche, die class="chosen-with-children" mit CSS2 oder CSS3 nur dann, wenn die div enthält auch die class="children". Irgendeine Idee, wie man das löst? Ich hoffe, das ist möglich.

Vielen Dank im Voraus.

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> 

Answer 1

Es ist nicht möglich, mit reinem CSS, als explained here.

Wenn Sie wollten jQuery verwenden Sie dies tun könnte:

$(".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>