Pergunta do seletor CSS3 para todos, exceto a primeira seleção

91

Com a seguinte marcação, quero que um seletor CSS selecione todos, exceto o primeiro menu de seleção em cada div de opções - dos quais podem haver muitos:

<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>

Estou usando isso no Prototype, que tem suporte quase total ao seletor css3, então não estou preocupado com o suporte do navegador.

O seletor inicial seria algo como:

div.options div select

Tentei algumas variações do nth-childe, :not(:first-child)mas não consigo fazer funcionar.

Robjmills
fonte

Respostas:

48

Você precisa selecionar a opção divs em vez de selects ao usar :not(:first-child), porque cada selecté o primeiro (e único) filho de seu pai div:

div.options > div:not(:first-child) > select

Uma alternativa :not(:first-child)é usar :nth-child()com um deslocamento inicial de 2, como este:

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

Outra alternativa é com o combinador irmão geral ~(que é compatível com o IE7 +):

div.options > div ~ div > select
BoltClock
fonte
obrigado pela informação extra, aceitei a outra resposta porque também era correta e veio primeiro.
robjmills
1
Caso você esteja preocupado com IEs mais antigos, adicionei uma terceira solução.
BoltClock
0

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

cfx
fonte