web-dev-qa-db-fra.com

Question de sélection CSS3 pour tous mais sélectionnez d'abord

Avec le balisage suivant, je veux qu'un sélecteur CSS sélectionne tout sauf le premier menu de sélection dans chaque div d'options - dont il peut y en avoir plusieurs:

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

J'utilise ceci dans Prototype qui a un support de sélecteur css3 presque complet, donc pas concerné par le support du navigateur.

Le sélecteur initial serait quelque chose comme:

div.options div select

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

htmlcsscss3css-selectors
79
robjmills

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

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

Vous devez sélectionner l'option divs au lieu de selects lorsque vous utilisez :not(:first-child), car chaque select est le premier (et le seul) enfant de son parent div:

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

Une alternative à :not(:first-child) consiste à 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 combinateur général frère ~ (Qui est pris en charge par IE7 +):

div.options > div ~ div > select
45
BoltClock