html - tipos - selector de hijos css

Pregunta de selección de CSS3 para todos, pero primero seleccione

Question

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.

Answer 1

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

Answer 2

Ver: http://jsfiddle.net/uDvEt/1/

.options > div:not(:first-child) select { background:yellow;}