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.
See: http://jsfiddle.net/uDvEt/1/
.options > div:not(:first-child) select { background:yellow;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With