Sélecteur de CSS3 question pour tous, mais d'abord sélectionner

Question

Avec le balisage suivant je veux un sélecteur CSS pour sélectionner tous les mais la première sélectionnez menu à l'intérieur de chaque options div - qui peuvent être nombreuses:

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

Je suis dans un Prototype qui a presque plein css3 sélecteur de soutien afin de ne pas concernés par la prise en charge du navigateur.

La première sélecteur serait quelque chose comme:

div.options div select

J'ai essayé quelques variations sur nth-child et :not(:first-child) mais n'arrive pas à le faire fonctionner.

Answer 1

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

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

Answer 2

Vous devez sélectionner l'option divs au lieu de l' selects lors de l'utilisation d' :not(:first-child), parce que chaque select est le premier (et seul) enfant de son parent div:

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

Une alternative à l' :not(:first-child) est d'utiliser :nth-child() avec un décalage de départ de 2, comme ceci:

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

Une autre alternative est avec le grand frère du combinator ~ (ce qui est pris en charge par IE7+):

div.options > div ~ div > select