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;
}

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


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 > *
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.