Czy istnieje selektor CSS "haschildren"?

Powiel możliwe:
Is there a CSS parent selector?Czy istnieje selektor CSS "haschildren"?

Czy istnieje selektor CSS można używać tylko wtedy, gdy element podrzędny istnieje?

Rozważmy:

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

Chciałbym zastosować display:none do dział tylko wtedy, gdy nie mają co najmniej jedno dziecko <li> element.

Każdy selektor, którego mogę użyć, aby to zrobić?

Źródło

2012-08-30 Chaitanya

niemożliwe z css, ale możliwe z javascript – Ibu

Niestety, nie jest to możliwe przy użyciu selektorów CSS.

Źródło

2012-08-30 23:18:27 ThiefMaster

Oto niektóre informacje tła: https://css-tricks.com/parent-selectors-in-css/ – Typoheads

Sortuj, z :empty, ale jest ograniczona.

Przykład: http://jsfiddle.net/Ky4dA/3/

Nawet węzły tekstowe powoduje, że rodzic nie może być uznane za pusty, więc UL wewnątrz DIV by utrzymać DIV przed dopasowane.

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

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

Jeśli pójdziesz trasę skryptu:

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

oczywiście jQuery sprawia, że zadanie takiego łatwiejszy, ale to jedno zadanie nie jest wystarczające uzasadnienie m.in. cała biblioteka.

Źródło

2012-08-30 23:22:09

CSS nie ma (jeszcze) żadnych reguł nadrzędnych, jedyny sposób obejścia tego, jeśli musisz go zastosować tylko rodzice, którzy zawierają określone dziecko, jest z Javascriptem lub łatwiej z biblioteką javascript o nazwie jQuery.

JavaScript mogą być napisane w similair sposób CSS w someways, dla przykładu chcemy zrobić coś takiego na dole naszej strony HTML:

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

(w tym celu trzeba by zaliczyć biblioteka jQuery w dokumencie, po prostu poprzez umieszczenie następujących w swojej <head></head>

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

Źródło

2012-08-30 23:23:34

Podobało mi ten najbardziej, ponieważ jest bardzo kompaktowy. Użyłem go razem z selektorem nie, takim jak: jQuery (". Navbar-inner: not (: has (ul li))"). Css ("display", "none"); –

Jeśli używasz jQuery, można wypróbować tę funkcję

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

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

Źródło

2012-08-30 23:23:40 Infinity

Nie ma innej opcji

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

Źródło

2012-08-30 23:39:23

Czy istnieje selektor CSS "haschildren"?

Odpowiedz

Powiązane problemy