html - tipos - selector de hijos css
Pregunta de selección de CSS3 para todos, pero primero seleccione (2)
Debe seleccionar la opción div
s en lugar de select
s cuando usa :not(:first-child)
, porque cada select
es el primer (y único) elemento secundario de su div
principal:
div.options > div:not(:first-child) > select
Una alternativa a :not(:first-child)
es usar :nth-child()
con un desplazamiento inicial de 2, como este:
div.options > div:nth-child(n + 2) > select
Otra alternativa es con el combinador de hermanos general ~
(que es compatible con IE7 +):
div.options > div ~ div > select
Con el siguiente marcado quiero un selector CSS para seleccionar todos menos el primer menú de selección dentro de cada div de opciones, de las cuales puede haber muchas:
<div class="options">
<div class="opt1">
<select title="Please choose Warranty">
<option value="">Select Waranty</option>
<option value="1">1 year guarantee</option>
<option value="2">3 year guarantee</option>
</select>
</div>
<div class="opt2">
<select title="Please choose Color">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
</select>
</div>
<div class="opt3">
<select title="Please choose Size">
<option value="">Select Size</option>
<option value="1">Small</option>
<option value="2">Big</option>
</select>
</div>
</div>
Estoy usando esto dentro de Prototype que tiene soporte casi completo para el selector css3, por lo que no me preocupa el soporte del navegador.
El selector inicial sería algo así como:
div.options div select
He intentado algunas variaciones sobre nth-child
y :not(:first-child)
pero parece que no puede hacer que funcione.
Ver: http://jsfiddle.net/uDvEt/1/
.options > div:not(:first-child) select { background:yellow;}