Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 selector question for all but first select

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.

like image 338
robjmills Avatar asked Feb 21 '11 12:02

robjmills


1 Answers

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

.options > div:not(:first-child) select { background:yellow;} 
like image 199
Gideon Avatar answered Nov 06 '22 18:11

Gideon