CSS selector de hijo inmediata

Question

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

La etiqueta <h1> es visible, mientras que el siguiente yui-ge etiqueta div que está oculto. Si> solo se aplica a niños inmediatos, ¿cómo es que mi yui-ge está aplicando el CSS anterior (tanto en Chrome como en 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> 

actualización

vistazo aquí: --LINK REMOVED--

Haga clic en la pestaña "Woot" .... no hay resultados se muestran en la ficha woot por defecto - que permanecen ocultos .

Answer 1

usted tiene esta regla CSS:

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

Esta regla se aplica a todos los DIVs dentro del elemento #main, que no tienen las clases sites o default y son hijos de un elemento .woot.

Su estructura es:

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

Como se puede ver, el .yui-ge DIV No tiene la clase sites ni default y está dentro de un elemento .woot. Por lo tanto, estará oculto.

---

El problema es que usted tiene dos DIVs en la cadena ancestro que tiene la clase woot.

Answer 2

Si oculta un elemento, también se ocultan todos sus elementos secundarios.