28

重複の可能性:
CSS 親セレクターはありますか?

子要素が存在する場合にのみ使用できる css セレクターはありますか?

検討：

<div> <ul> <li></li> </ul> </div>

少なくとも 1 つの子要素display:noneがない場合にのみ divに適用したいと思います。<li>

これを行うために使用できるセレクターはありますか？

4

5 に答える 5

30

並べ替え、:emptyしかし、それは限られています。

例: http://jsfiddle.net/Ky4dA/3/

テキスト ノードであっても、親が空と見なされないため、DIV 内の UL によって DIV が一致しなくなります。

<h1>Original</h1>
<div><ul><li>An item</li></ul></div>

<h1>No Children - Match</h1>
<div></div>

<h1>Has a Child - No Match</h1>
<div><ul></ul></div>

<h1>Has Text - No Match</h1>
<div>text</div>

DIV {
 background-color: red;
 height: 20px;    
}

DIV:empty {
 background-color: green;
}

参照: http://www.w3.org/TR/selectors/#empty-pseudo

スクリプトルートに行く場合：

// pure JS solution
​var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
    if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
        divs[i].style.display = "none";
    }        
}​

もちろん、jQuery はこのような作業を容易にしますが、この 1 つの作業だけでは、ライブラリ全体を含める十分な理由にはなりません。

于 2012-08-30T23:22:09.707 に答える
20

いいえ、残念ながらそれは CSS セレクターでは不可能です。

于 2012-08-30T23:18:27.447 に答える
4

残念ながら、CSS には (まだ) 親ルールがありません。特定の子を含む親のみを適用する必要がある場合、それを回避する唯一の方法は、Javascript を使用するか、より簡単にjQueryと呼ばれる JavaScript のライブラリを使用することです。

Javascript は、いくつかの点で CSS に似た方法で書くことができます。あなたの例では、HTML ページの下部で次のようにします。

<script type="text/javascript">
     $('div:has(ul li)').css("color","red");
</script>

(これを行うには、ドキュメントに jQuery ライブラリを含める必要があります。<head></head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
于 2012-08-30T23:23:34.247 に答える
2

jqueryを使用している場合は、この機能を試すことができます

jQuery.fn.not_exists = function(){
    return this.length <= 0;
}

if ($("div#ID > li").not_exists()) {
    // Do something
}
于 2012-08-30T23:23:40.687 に答える
2

別のオプションがあります

$('div ul').each(function(x,r) {
    if ($(r).find('li').length < 1){
        $(r).css('display','block'); // set display none
    }
})
于 2012-08-30T23:39:23.343 に答える