javascript - How to apply class to first button of the div?

I have this html and I want to apply class to first button of the DIV.

<div class="button-container">
 <button class="save" />
 <button class="reset" />
</div>

I want to add class to the first button.

I want to use jQuery for this solution.

I have this html and I want to apply class to first button of the DIV.

<div class="button-container">
 <button class="save" />
 <button class="reset" />
</div>

I want to add class to the first button.

I want to use jQuery for this solution.

Share Improve this question edited Nov 18, 2009 at 11:24 asked Nov 18, 2009 at 6:35 Wasim Shaikh 7,03018 gold badges62 silver badges88 bronze badges

Do you want a CSS style that applies to the first button in the div? Then SleighBoy has the answer. – andho Commented Nov 18, 2009 at 8:31

Add a comment |

4 Answers 4

Sorted by: Reset to default 7

Use the :first-child selector

$("div.button-container button:first-child" ).addClass ( "yourclass" );

div.button-container > button:first-child { font-weight: bold; }

Source: http://www.w3.org/TR/CSS2/selector.html#first-child

You could look at this: http://docs.jquery.com/Selectors/firstChild

$('div button:first-child').addClass(...)

You can add a second class like this.

<div class="button-container">
 <button class="save SecondClass" />
 <button class="reset" />
</div>