Seleccione todos los elementos secundarios recursivamente en CSS

407

¿Cómo puede seleccionar todos los elementos secundarios de forma recursiva?

div.dropdown, div.dropdown > * {
    color: red;
}

Esta clase solo arroja una clase en el className definido y todos los elementos secundarios inmediatos. ¿Cómo puede, de una manera simple, elegir todos los ChildNodes como este:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}
css css-selectors clarkk
fuente

Respuestas:

621

Use un espacio en blanco para unir todos los descendientes de un elemento:

div.dropdown * {
    color: red;
}

x ycoincide con cada elemento y que está dentro de x , por muy anidado que esté: hijos, nietos, etc.

El asterisco *coincide con cualquier elemento.

Especificación oficial: CSS 2.1: Capítulo 5.5: Selectores descendientes

anroesti
fuente
funciona, pero ahora se anula todas las demás clases, incluso si tienen una prioridad más alta .. (se colocan después en el archivo css)
clarkk
El selector también juega un papel en la prioridad que tienen las propiedades, no solo en qué parte del archivo aparecen. Puede intentar agregar `! Important` a sus valores, por ejemplocolor: red !important;
anroesti
Lo sé, es un poco feo. En su lugar, podría intentar escribir selectores más precisos, lo más probable es que esto también funcione. (p. ej. #head ul→ #head ul#navi)
anroesti
2
Bien, un ejemplo muy básico: p.xyes más importante que p, porque es más específico. jsfiddle.net/ftJVX
anroesti
1
¿Qué pasa si quiero a todos los niños que tuvieron una clase específica?
MEM
144

La regla es la siguiente: 

A B

B como descendiente de A

A > B

B como hijo de A

Entonces 

div.dropdown *

y no 

div.dropdown > *
Abdennour TOUMI
fuente