css-selectors selectores - Seleccionar todos los elementos secundarios de forma recursiva en CSS




atributos avanzados (3)

¿Cómo se puede seleccionar recursivamente todos los elementos secundarios?

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

Esta clase solo lanza una clase en el className definido y en todos los elementos secundarios inmediatos. ¿Cómo puede usted, de una manera simple, elegir todos los nodos secundarios de esta manera?

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

Answers

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

div.dropdown * {
    color: red;
}

xy coincide 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


La regla es la siguiente:

A B 

B como descendiente de A

A > B 

B como hijo de A

Asi que

div.dropdown *

y no

div.dropdown > *

Normalmente, se agrega un selector de clase a la pseudo-clase :not() como:

:not(.printable) {
    /* Styles */
}

Pero si necesita una mejor compatibilidad con el navegador (IE8 y versiones anteriores no es compatible con :not() ), probablemente esté mejor creando reglas de estilo para los elementos que tienen la clase "imprimible". Si incluso eso no es posible a pesar de lo que diga sobre su marca real, es posible que tenga que trabajar su marca alrededor de esa limitación.

Tenga en cuenta que, dependiendo de las propiedades que establezca en esta regla, algunos de ellos pueden ser heredados por descendientes que son .printable , o pueden afectarlos de una manera u otra. Por ejemplo, aunque la display no se hereda, la configuración de display: none en a :not(.printable) evitará que se muestren todos y sus descendientes, ya que elimina el elemento y su subárbol del diseño por completo. A menudo puede evitar esto usando visibility: hidden lugar, lo que permitirá a los descendientes visibles mostrar, pero los elementos ocultos seguirán afectando el diseño como lo hicieron originalmente. En resumen, solo ten cuidado.





css css-selectors