CSS selettore figlio diretto

Question

#main .container > div:not(.sites):not(.default) { 
    display: none; 
} 

Il <h1> tag è visibile, mentre il tag sotto yui-ge div è nascosto. Se> si applica solo ai bambini immediati, come mai il mio yui-ge ha applicato il CSS sopra riportato (sia in Chrome che in Firefox).

<div class='container'> 
    <div class='default selected'> 
     <h1>Page Title</h1> 
     <div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS 
      //more div tags 
     </div> 
    </div> 
    //more HTML here 
</div> 

aggiornamento

Guardate qui: --link della rimozione del

Fare clic sulla scheda "Woot" .... non ha prodotto risultati sono mostrati nella scheda predefinita woot - rimangono nascosti .

Answer 1

avete questa regola CSS:

#main .woot > div:not(.sites):not(.default) { 
    display: none; 
} 

Questa regola vale per tutti i div all'interno dell'elemento #main, che non hanno le classi sites o default e sono figli di un elemento .woot.

La vostra struttura è:

<div id="main"> 
    <div class="woot"> 
     <div class="woot default selected"> 
      <div class="yui-ge"> ... </div> 
     </div> 
    </div> 
</div> 

Come si può vedere, la .yui-ge DIV non hai la classe sites né default ed è all'interno di un elemento .woot. Pertanto, sarà nascosto.

---

Il problema è che ci sono due DIV nella catena degli antenati che hanno la classe woot.

Answer 2

Se si nasconde un elemento, vengono nascosti anche tutti gli elementi figlio.