C'è un selettore CSS "haschildren"?

Eventuali duplicati:
Is there a CSS parent selector?C'è un selettore CSS "haschildren"?

C'è un selettore CSS posso usare solo se esiste un elemento figlio?

considerare:

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

Vorrei applicare display:none a div solo se non ha almeno un figlio <li> elemento.

Qualsiasi selettore che posso usare, fare questo?

fonte

2012-08-30 Chaitanya

non è possibile con i CSS, ma possibile con javascript – Ibu

No, sfortunatamente ciò non è possibile con i selettori CSS.

fonte

2012-08-30 23:18:27 ThiefMaster

Ecco alcune informazioni di base: https://css-tricks.com/parent-selectors-in-css/ – Typoheads

Sort of, with :empty ma è limitato.

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

Anche nodi di testo causerà il genitore non considera vuoto, quindi un UL all'interno del DIV manterrebbe DIV di essere abbinato.

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

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

Se si va via script:

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

Naturalmente, jQuery rende un compito come questo più facile, ma questo compito non è una giustificazione sufficiente per includere un'intera liberia.

fonte

2012-08-30 23:22:09

Il CSS non ha (ancora) alcuna regola genitore, purtroppo, l'unico modo per aggirarlo se è necessario applicarlo solo i genitori che contengono un bambino specifico è con Javascript o più facilmente con una libreria di javascript chiamata jQuery.

Javascript può essere scritto in modo similair a CSS in someways, per l'esempio vorremmo fare qualcosa di simile in fondo alla nostra pagina HTML:

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

(Per questo si avrebbe bisogno di includere il libreria jQuery nel documento, semplicemente inserendo la seguente nel tuo <head></head>

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

fonte

2012-08-30 23:23:34

mi è piaciuto questo è il più poiché è molto compatto. L'ho usato insieme al non selettore come: jQuery ('. Navbar-inner: not (: has (ul li))'). Css ('display', 'none'); –

Se si utilizza jQuery, è possibile provare questa funzione

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

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

fonte

2012-08-30 23:23:40 Infinity

c'è un'altra opzione

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

fonte

2012-08-30 23:39:23

C'è un selettore CSS "haschildren"?

risposta

Problemi correlati