CSS3 selector question for all but first select
HtmlCssCss SelectorsHtml 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 div
s instead of the select
s 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!