CSS'de descendent li olmadan div nasıl seçilir?

Question

Herhangi bir li descendent içermeyen bir div gizlemek için CSS kullanmak istiyorum.

Verilen bu:

<div> 
    I should be visible (red) 
    <ul> 
    <li>one</li> 
    </ul> 
</div> 

<div> 
    I should be hidden (blue) 
    <ul></ul> 
</div> 

Ben ikinci div seçmek ve ekran uygulamak için kullanabilirsiniz Ne CSS: none (: 1px solid blue bu demo için veya sınır)? https://jsfiddle.net/7yab2z27/

Answer 1

Sen, bu durumda JS kullanmayı düşünün benim kod kudreti yardımcı olur bak olabilir: Burada

bir keman olduğunu. jQuery to hide a DIV if it has no unordered list items

$(document).ready(function() { 
 

 
    $('#seconddiv').hide(); 
 
    $('#seconddiv').has('ul').show(); 
 
});

#seconddiv { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="seconddiv"> 
 
    You cant see me I dont have unordered list lol! 
 
    <ul> 
 
    <li></li> 
 
    </ul> 
 
</div>

Answer 2

CSS ile şey varlığına dayalı ebeveyn/atasına değişiklik yapamazsınız şudur: Burada cevabını buldum

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

eklemeyi unutmayın Dont veya soyundan gelenlerin durumu. Tersi doğrudur.

Bu durumda, JS'yi kullanmak ve duruma göre duruma göre stiller uygulamak isteyebilirsiniz.

JQuery'yi kullandığınızı varsayarak, aşağıdaki gibi bir şey yapabilirsiniz.

var allDivs = $("div"); 
allDivs.each(function(index,eachDiv){ 
    if($(eachDiv).find("li").length === 0){ 
     $(eachDiv).hide(); 
    } 
});