web-dev-qa-db-ja.com

最初の選択を除くすべてのCSS3セレクターの質問

次のマークアップを使用すると、CSSセレクターで各オプションdiv内の最初の選択メニュー以外のすべてを選択できます。

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

ほぼ完全なcss3セレクターをサポートするPrototype内でこれを使用しているため、ブラウザーのサポートには関係ありません。

最初のセレクターは次のようになります。

_div.options div select
_

_nth-child_と:not(:first-child)でいくつかのバリエーションを試しましたが、機能させることができないようです。

htmlcsscss3css-selectors
79
robjmills

参照： http://jsfiddle.net/uDvEt/1/

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

:not(:first-child)を使用する場合は、divsではなくselectsオプションを選択する必要があります。これは、すべてのselectが親の最初の（唯一の）子であるためです。 div：

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

:not(:first-child)の代わりに、次のように、開始オフセット2で:nth-child()を使用することができます。

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

別の選択肢は、一般的な兄弟コンビネーター_~_（IE7 +でサポートされています）を使用することです：

_div.options > div ~ div > select
_
45
BoltClock