css div divにクラスの子がない場合

Question

divに特定のクラス名の子divがない場合、divを非表示にすることはできますか？

<div class="parent"> 
This div must be hidden 
</div> 

<div class="parent"> 
This div must be visible 
<div class="child"> 
child div 
</div> 
</div> 

JavaScriptでできない場合は、javascriptまたはjQueryを使用してください。

Answer 1

これはCSSだけでは不可能だと思いますが、Javascriptでは間違いなく可能です。クラスparent
を持つすべてのdivを見つける - - クラスchild
と子のdivを持つすべてのそれらを見つける -
にあなたが持っている

そのような子が存在しない場合は、純粋で、今style.display = none

を設定javascriptこれはちょっと複雑かもしれません。あなたthis questionからgetElementsByClassNameを使用して、上記のロジック適用することができます。jQueryで

//getElementsByClassName from @CMS's answer to the linked question 
var parentDivs = getElementsByClassName(document, "parent"); 
for(var i=0; i<parentDivs.length; i++) 
{ 
    var children = getElementsByClassName(parentDivs[i], "child"); 
    if(!children || children.length == 0) 
    { 
     parentDivs[i].style.display = "none"; 
    } 
} 

を、これは多くの簡単です：

$(".parent").each(function() 
{ 
    if($(this).children(".child").length == 0) 
    { 
     $(this).hide(); 
    } 
}); 

ライブ例：http://jsfiddle.net/nivas/JWa9r/

Answer 2

CSS3のので、あなたがすることができます：空のセレクタを使います。このメソッドは、現代のすべてのブラウザで広くサポートされており、javascriptの代替よりもはるかに高速です。