Pytanie dotyczące selektora CSS3 dla wszystkich oprócz pierwszego wyboru

92

Z następującymi znacznikami chcę, aby selektor CSS zaznaczył wszystkie oprócz pierwszego menu wyboru w każdym div opcji - których może być wiele:

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

Używam tego w Prototype, który ma prawie pełną obsługę selektora css3, więc nie przejmuje się obsługą przeglądarki.

Początkowy selektor wyglądałby tak:

div.options div select

Wypróbowałem kilka wariacji nth-childi :not(:first-child)nie wydaje mi się, żeby to działało.

robjmills
źródło

Odpowiedzi:

49

Musisz wybrać opcję divs zamiast selects podczas używania :not(:first-child), ponieważ każdy selectjest pierwszym (i jedynym) dzieckiem swojego rodzica div:

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

Alternatywą dla :not(:first-child)jest użycie :nth-child()z początkowym przesunięciem 2, na przykład:

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

Inną alternatywą jest generalny kombinator rodzeństwa ~(obsługiwany przez IE7 +):

div.options > div ~ div > select
BoltClock
źródło
dzięki za dodatkowe informacje, zaakceptowałem drugą odpowiedź, ponieważ również była poprawna i przeszła pierwsza.
robjmills,
1
Na wypadek, gdybyś martwił się starszymi IE, dodałem trzecie rozwiązanie.
BoltClock
0

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

cfx
źródło