select the first selection from dropdownlist using CSSSelector

Question

below is the select html code and I'm looking for the first option which is 15

<select>
<option value="15" selected="selected">15</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>

I have tried this below and I get all the selection 15,25,50,100

div#topPager.gridHeader div.pagerItemContainer select.pagesize option

if I use the nth of type like this then I got the first selection.

div#topPager.gridHeader div.pagerItemContainer select.pagesize option:nth-of-type(1)

is there any other way of doing instead of using the nth-of-type?

score 1 · Accepted Answer · answered Dec 07 '12 at 14:29

1

More to the point and accurate:

#yourSpecificSelectors option[value="15"] {}

This is called an attribute selector, in this case it matches the option with value="15".

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

answered Dec 07 '12 at 14:29

Wesley Murch

101,186
37
194
228

Yes I just realized ;) I never use them..but I don't know why he is doing so...because hardly he can style there – Mr. Alien Dec 07 '12 at 14:30
For that matter, quotes are *not* always optional; if you're looking for a value that starts with a digit, you must either use quotes or escape the digit. – BoltClock Dec 07 '12 at 14:31
@BoltClock So you mean when your attr contains numerical val, quotes are compulsory? – Mr. Alien Dec 07 '12 at 14:32
@Mr.Alien: I said "starts with". – BoltClock Dec 07 '12 at 14:32
@BoltClock: Good call, never knew that: http://jsfiddle.net/RXWrv/ I've always used quotes since I believe jQuery now requires it. – Wesley Murch Dec 07 '12 at 14:35
@WesleyMurch: You have it backwards: [jQuery *used* to require quotes, but not anymore](http://stackoverflow.com/questions/9987068/do-you-use-quotes-in-jquery-when-searching-for-attribute-values/9987074#9987074) :) Either way, it's always best to use quotes - there is absolutely no reason not to. – BoltClock Dec 07 '12 at 14:35
@BoltClock Ah so I see, that's right. You forgot one thing though: IT ADDS BYTES TO MY CSS FILE OMG PERFORMACE WILL SUFFER! ;) – Wesley Murch Dec 07 '12 at 14:36
Yeah... [about that...](http://stackoverflow.com/questions/13743671/is-important-bad-for-performance#comment18885649_13743901) – BoltClock Dec 07 '12 at 14:37

select the first selection from dropdownlist using CSSSelector

1 Answers1