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

Bien, un ejemplo muy básico: p.xyes más importante que p, porque es más específico. jsfiddle.net/ftJVX

— anroesti

¿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