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.
css
css-selectors
MTilsted
fuente
fuente

Respuestas:
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>fuente
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>fuente