Gibt es einen CSS "haschildren" Selektor?

Mögliche Duplizieren:
Is there a CSS parent selector?Gibt es einen CSS "haschildren" Selektor?

Gibt es einen CSS-Selektor ich nur verwenden, wenn ein untergeordnetes Element vorhanden ist?

Bedenken Sie:

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

ich display:none bewerben möchte nur div, wenn es nicht mindestens ein Kind <li> Element hat.

Jeder Selektor, den ich verwenden kann, tun dies?

Quelle

2012-08-30 Chaitanya

nicht möglich mit CSS, aber möglich mit Javascript – Ibu

Nein, leider ist das mit CSS-Selektoren nicht möglich.

Quelle

2012-08-30 23:18:27 ThiefMaster

Hier einige Hintergrundinformationen ist: https://css-tricks.com/parent-selectors-in-css/ – Typoheads

Art von, mit :empty aber es ist begrenzt.

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

Auch Textknoten werden die Eltern dazu führen, nicht leer gehalten werden, so dass ein UL innerhalb des DIV würde von den DIV halten abgestimmt sind.

<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; 
}

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

Wenn Sie den Skript Weg gehen:

// 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"; 
    }   
}

Natürlich macht jQuery eine Aufgabe wie diese einfacher, aber diese Aufgabe nicht ausreicht, um die Begründung zu enthalten eine ganze Bibliothek.

Quelle

2012-08-30 23:22:09

CSS hat (noch) keine Elternregeln leider, der einzige Weg darum, wenn Sie es anwenden müssen nur Eltern, die ein bestimmtes Kind enthalten, ist mit dem Javascript, oder einfacher mit einer Bibliothek von Javascript genannt jQuery.

Javascript kann für Ihr Beispiel in einem similair Weg zu CSS in someways geschrieben werden, würden wir so etwas wie dieses am unteren Rand unserer HTML-Seite tun:

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

(Dazu Sie die einschließen müssten jQuery-Bibliothek in Ihrem Dokument, indem Sie einfach die folgende Umsetzung in Ihrem <head></head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Quelle

2012-08-30 23:23:34

ich mochte Dies ist das Beste, da es sehr kompakt ist. Ich benutzte es zusammen mit dem nicht-Selektor wie: jQuery ('. Navbar-inner: nicht (: hat (ul li))'). Css ('display', 'none'); –

Wenn Sie jQuery verwenden, können Sie diese Funktion ausprobieren

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

if ($("div#ID > li").not_exists()) { 
    // Do something 
}

Quelle

2012-08-30 23:23:40 Infinity

Es gibt eine andere Option

$('div ul').each(function(x,r) { 
    if ($(r).find('li').length < 1){ 
     $(r).css('display','block'); // set display none 
    } 
})

Quelle

2012-08-30 23:39:23

Gibt es einen CSS "haschildren" Selektor?

Antwort

Verwandte Themen