1. ホーム
  2. html

[解決済み] CSS3セレクタの質問(最初のセレクト以外について

2022-11-26 19:01:02

質問

以下のマークアップで、各オプション div 内の最初の選択メニュー以外を選択する CSS セレクタが欲しいのですが、たくさんあると思います。

<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) を追加しましたが、うまくいかないようです。

どのように解決するのですか?

参照してください。 http://jsfiddle.net/uDvEt/1/

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