Pregunta del selector CSS3 para todos menos primero seleccione

92

Con el siguiente marcado, quiero que un selector de CSS seleccione todo menos el primer menú de selección dentro de cada div de opciones, de los cuales puede haber muchos:

<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 de selector css3 casi completo, por lo que no me preocupa el soporte del navegador.

El selector inicial sería algo como:

div.options div select

Probé algunas variaciones de nth-childy, :not(:first-child)pero parece que no puedo hacer que funcione.

Robjmills
fuente

Respuestas:

49

Debe seleccionar la opción divs en lugar de la selects cuando se usa :not(:first-child), porque cada selectes el primer (y único) hijo de su padre div:

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
BoltClock
fuente
gracias por la información adicional, acepté la otra respuesta ya que también era correcta y llegó primero.
robjmills
1
En caso de que le preocupen los IE más antiguos, agregué una tercera solución.
BoltClock
0

.options > div:nth-child(n+2) select

cfx
fuente