selector CSS para obtener el elemento más profundo de la clase específica en el árbol HTML

Question

Tengo un montón de elementos DIV en mi HTML, varios de los cuales tienen su atributo de clase establecido en "rowsLayout". Algunas de estas filasLayout DIV pueden anidarse una dentro de la otra. Quiero definir un selector de CSS que solo se dirija a los DIV más profundos en esos anidamientos. Es decir, I no desea quiero ninguna de las filas DIVs de LayLayout que contienen cualquier otro rowLayout DIVs.

<div id="a" class="rowsLayout"> 
    <div id="b" class="rowsLayout" /> 
    <div id="c" class="rowsLayout"> 
    <div id="d" class="rowsLayout" /> 
    </div> 
</div> 
<div id="e" class="rowsLayout" /> 

Con esta estructura, quiero un selector que apunte b, d y e.

¿Se puede hacer esto?

Answer 1

¿Puede considerar la opción de agregar una clase adicional como "principal" a los elementos principales? sería más fácil y es el "estándar"

Answer 2

Nº

Sus opciones son: seleccionarlos por id; agregue una segunda clase para esas hojas, y seleccione por esa clase; use una solución basada en javascript para establecer el estilo apropiado (posiblemente usando la segunda clase).

Answer 3

Dependiendo del número de divs que tienes que podría o bien hacer algo como:

div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {} 

Tal vez hay una mejor manera de resolver su problema, ¿qué estás tratando de aplicar a todos estos divs?

Answer 4

Puede usar el selector jQuery .rowsLayout:not(:has(.rowsLayout)).

Sin embargo, por razones de rendimiento, this is not possible in CSS.

Su selector depende de los niños (o la falta de los mismos) de los elementos a los que se dirige.
CSS está diseñado para que los selectores de un elemento siempre se puedan resolver antes de que existan los elementos del elemento; esto permite que CSS se aplique cuando se carga un documento.

Answer 5

¿Por qué no utilizar: vacío?

JQuery Empty

EDIT: También funciona como un selector CSS:

:empty { background-color: black; } 

más ediciones:

:last-of-type casi funciona, pero se pone 'a' por alguna razón. Ver mi violín

http://jsfiddle.net/DUdVR/3/

Answer 6

seleccionarlos por ID

#b, #d, #e { 
/* styles here */ 
} 

ninguna razón para que todos los nombres de las clases de repetición BTW? Usted puede envolver todo el asunto en el div de #layout o algo y luego hacer ...

#layout div { 
/* styles */ 
} 

en lugar de añadir que el nombre de la clase a la vez div.

Answer 7

Parece que esto es posible, utilizando el atributo: dir o: lang.

El uso de: lang es preferible en 2015, ya que es compatible con la mayoría de los navegadores.

Ejemplo:

.container { 
 
    padding:20px; 
 
} 
 

 
:lang(ar) { 
 
    direction:rtl; 
 
} 
 

 
:lang(en) { 
 
    direction:ltr; 
 
} 
 

 
.container:lang(en) { 
 
    background-color:blue; 
 
} 
 

 
.container:lang(ar) { 
 
    background-color:red; 
 
} 
 

 
.container .a:lang(en) { 
 
    background-color:orange; 
 
} 
 

 
.container .a:lang(ar) { 
 
    background-color:yellow; 
 
}

<div id="searchHere"> 
 
    
 
    <div lang=en>  
 
     <div class="container"> 
 
      l t r 
 
     <div class=a> 
 
       a 
 
     </div> 
 
     </div> 
 
     
 
     <div lang=ar> 
 
      <div class="container"> 
 
      r t l 
 
      <div class=a> 
 
       a 
 
       </div> 
 
      </div>   
 
     
 
      <div> 
 
      <div class="container"> 
 
       r t l 
 
       <div class=a> 
 
       a 
 
       </div> 
 
      </div> 
 
      
 
      <div lang=ar> 
 
       <div class="container"> 
 
        r t l 
 
        <div class=a> 
 
        a 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div lang=en>  
 
       <div class="container"> 
 
        l t r 
 
       <div class=a> 
 
       a     
 
       </div> 
 
       
 
       <div lang=ar> 
 
        <div class="container"> 
 
        r t l 
 
        <div class=a> 
 
         a      
 
         <div lang=en>  
 
         <div class="container"> 
 
          l t r 
 
          <div class=a> 
 
          a     
 
          </div> 
 
          <div> 
 
          <div> 
 
          
 
           <div lang=en>  
 
           <div class="container"> 
 
            l t r 
 
            <div class=a> 
 
            a     
 
            </div> 
 
           </div>      
 
           </div> 
 
           
 
           <div lang=ar>  
 
           <div class="container"> 
 
            r t l 
 
            <div class=a> 
 
            a     
 
            </div> 
 
           </div>      
 
           </div> 
 
           
 
          </div> 
 
          
 
          </div> 
 
         </div>      
 
         </div> 
 
        </div> 
 
       </div> 
 
       </div>    
 
      </div> 
 
      
 
      </div> 
 
     
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

Aunque el ejemplo demuestra esto con LTR y RTL, el: lang podrían, en teoría pueden hacer para comportarse como un partido más profundo, utilizando por ejemplo: lang (más profundo-reemplaza-todo) aunque probablemente no sea donde lang = más profundo-sobrescribe-todo debe definirse en un elemento.

Answer 8

Tome un vistazo a esto:

div#b:first-of-type { 
style here 
}