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

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, no quiero ninguno de los DIV de rowsLayout que contengan cualquier otro DIV rowLayout.

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

Se puede hacer esto?

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

Sin embargo, por motivos de rendimiento, esto no es posible en CSS .

Su selector depende de los niños (o la falta de ellos) de los elementos a los que apunta.
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.

No.

Sus opciones son: seleccionarlas 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).

¿Puedes considerar la opción de agregar una clase extra como “padre” a los elementos principales? sería más fácil y es el “estándar”

Dependiendo de la cantidad de divs que tenga, podría hacer algo como:

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

Tal vez haya una mejor manera de resolver su problema, ¿qué intenta aplicar a todos estos divs?

seleccionarlos por ID

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

cualquier razón para todos los nombres de clase de repetición por cierto? Podrías envolver todo en div of #layout o algo así …

 #layout div { /* styles */ } 

en lugar de agregar ese nombre de clase a div nunca.

Mira esto:

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

¿Por qué no usar: vacío?

JQuery Empty

EDITAR: También funciona como un selector de 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/

Parece que esto es posible, usando 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; } 
 
ltr
a
rtl
a
rtl
a
rtl
a
ltr
a
rtl
a
ltr
a
ltr
a
rtl
a