CSSで子孫のないdivを選択するには？

Question

divを隠すためにCSSを使用したいと思います。なし：私は2番目のdivを選択して表示適用するために使用することができますどのようなCSS

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

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

：（または境界：このデモのために1pxのソリッドブルー）を、この与えられた

？ここで

はフィドルです：https://jsfiddle.net/7yab2z27/

Answer 1

あなたは私のコードのかもしれないが、助けを参照してください、このような状況でJSを使用して検討するかもしれません。 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のあるものは、あなたが存在に基づいて、親/祖先に変更を加えることができないということです。私はここにあなたの答えを見つけ

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

を含めることを忘れてはいけませんまたは子孫の状態。反対の場合は真です。

このような状況では、JSを使用し、条件に基づいて必要に応じてスタイルを適用することをお勧めします。

jQueryを使用していると仮定すると、次のようなことができます。

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