CSS3-Auswahlfrage für alle außer der ersten Auswahl


90

Mit dem folgenden Markup möchte ich, dass ein CSS-Selektor alle bis auf das erste Auswahlmenü in jedem Optionsbereich auswählt - von denen es viele geben kann:

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

Ich verwende dies in Prototype, das fast die vollständige Unterstützung für CSS3-Selektoren bietet, sodass die Browserunterstützung keine Rolle spielt.

Der anfängliche Selektor wäre ungefähr so:

div.options div select

Ich habe ein paar Variationen ausprobiert nth-childund :not(:first-child)kann es anscheinend nicht zum Laufen bringen.

Antworten:



48

Sie müssen bei der Verwendung die Option divs anstelle der selects auswählen :not(:first-child), da jedes selectdas erste (und einzige) Kind des übergeordneten Elements ist div:

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

Eine Alternative dazu :not(:first-child)ist die Verwendung :nth-child()mit einem Startversatz von 2 wie folgt :

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

Eine andere Alternative ist der allgemeine Geschwisterkombinator ~(der von IE7 + unterstützt wird):

div.options > div ~ div > select

danke für die extra info, akzeptierte die andere antwort da sie auch richtig war und kam zuerst durch.
Robjmills

1
Nur für den Fall, dass Sie sich Sorgen um ältere IEs machen, habe ich eine dritte Lösung hinzugefügt.
BoltClock

0

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.