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 div
niñ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
.myTestClass
interior 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