¿Cómo aplico un estilo a todos los hijos de un elemento?


102

Tengo un elemento con class='myTestClass'. ¿Cómo aplico un estilo CSS a todos los elementos secundarios de estos elementos? Solo quiero aplicar el estilo a los elementos children. No sus nietos.

Podría usar

.myTestClass > div {
  margin: 0 20px;
}

que funciona para todos los divniños, pero me gustaría una solución que funcione para todos los niños. Pensé que me vendría bien *, pero

.myTestClass > * {
  margin: 0 20px;
} 

No funciona.

Editar

El .myTestClass > *selector no aplica la regla en Firefox 26, y no hay otra regla para el margen según Firebug. Y funciona si reemplazo *con div.


2
¿Cómo 'no funciona'? Tenga en cuenta que los descendientes de esos elementos secundarios heredarán (probablemente) la mayoría de los estilos asignados a esos elementos secundarios.
David dice reinstalar a Monica

Depura esto con el inspector y mira si hay una regla que lo
controle

Respuestas:


147

Como comentó David Thomas , los descendientes de esos elementos secundarios heredarán (probablemente) la mayoría de los estilos asignados a esos elementos secundarios.

Debe envolver su .myTestClassinterior en un elemento y aplicar los estilos a los descendientes agregando el .wrapper * selector de descendientes . Luego, agregue .myTestClass > * el selector de niños para aplicar el estilo a los elementos secundarios , no a sus nietos. Por ejemplo así:

JSFiddle - DEMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>


4
Nunca use un selector universal. Tiene un gran impacto en el rendimiento en el renderizado.
yesIcan

4
@yesIcan: Ok, es bueno saberlo ... ¿tiene una solución alternativa que no use el selector universal?
Matthew Nichols

8
El rendimiento del selector universal no es tan malo en los navegadores modernos. He aquí una referencia . Mi propia experiencia en el trabajo corrobora la conclusión de este autor.
Nathan

-2

En lugar del *selector, puede utilizar el :not(selector)con el> selector y establecer algo que definitivamente no será un niño.

Editar: pensé que sería más rápido, pero resulta que estaba equivocado. Indiferencia.

Ejemplo:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

5
¿Cuál es la ventaja de hacer esto?
Wilson Biggs

3
@WilsonBiggs: parece ser un intento equivocado de "no usar un selector universal". Pero obviamente es una mala idea, ya que es "casi universal", pero requiere una prueba adicional, por lo que tiene que hacer todo el trabajo que haría un selector universal y luego hacer un trabajo adicional.
ToolmakerSteve

: not (selector) solo funciona en safari y no parece que funcione en chrome / firefox
gtamborero
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.