CSS3 selector question for all but first select

HtmlCssCss Selectors

Html Problem Overview


With the following markup i want a CSS selector to select all but the first select menu within each options div - of which there may be many:

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

I am using this within Prototype which has almost full css3 selector support so not concerned by browser support.

The initial selector would be something like:

div.options div select

I've tried a few variations on nth-child and :not(:first-child) but can't seem to make it work.

Html Solutions


Solution 1 - Html

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

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

Solution 2 - Html

You need to select the option divs instead of the selects when using :not(:first-child), because every select is the first (and only) child of its parent div:

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

An alternative to :not(:first-child) is to use :nth-child() with a starting offset of 2, like this:

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

Another alternative is with the general sibling combinator ~ (which is supported by IE7+):

div.options > div ~ div > select

Solution 3 - Html

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

Solution 4 - Html

.options > *:not(:first-child)

the best!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionrobjmillsView Question on Stackoverflow
Solution 1 - HtmlGideonView Answer on Stackoverflow
Solution 2 - HtmlBoltClockView Answer on Stackoverflow
Solution 3 - HtmlcfxView Answer on Stackoverflow
Solution 4 - HtmlGrs83View Answer on Stackoverflow