Pertanyaan pemilih CSS3 untuk semua kecuali pilihan pertama


92

Dengan markup berikut, saya ingin pemilih CSS memilih semua kecuali menu pilihan pertama di dalam setiap opsi div - yang mungkin ada banyak:

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

Saya menggunakan ini dalam Prototipe yang memiliki dukungan pemilih css3 hampir penuh sehingga tidak peduli dengan dukungan browser.

Pemilih awal akan menjadi seperti ini:

div.options div select

Saya sudah mencoba beberapa variasi nth-childdan :not(:first-child)sepertinya tidak berhasil.

Jawaban:



49

Anda perlu memilih opsi divs daripada selects saat menggunakan :not(:first-child), karena every selectadalah anak pertama (dan satu-satunya) dari induknya div:

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

Alternatifnya :not(:first-child)adalah menggunakan :nth-child()dengan offset awal 2, seperti ini:

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

Alternatif lain adalah dengan kombinator saudara umum ~(yang didukung oleh IE7 +):

div.options > div ~ div > select

terima kasih atas info tambahannya, terima jawaban lain karena juga benar dan masuk lebih dulu.
robjmills

1
Kalau-kalau Anda khawatir tentang IE lama, saya telah menambahkan solusi ketiga.
BoltClock

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.