CSS selector for the first element of class

Question

How can I choose only the first button in this code?

It's even more nested in my case, but this code is also a problem for me.

<div class="container">
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
  <div class="some_class">
    <span>abc</span>
    <button class="btn">...</button>
  </div>
</div>

Josh Crozier · Accepted Answer · 2014-03-19 20:59:31Z

3

You would use the :first-child pseudo class.

EXAMPLE HERE

.container .some_class:first-child button {
    background:black;
}

Alternatively, assuming that the markup can be different, you might need to use something like this to ensure that the first button is selected even if .some_class isn't the first element. (example)

.container :first-child button {
    background:black;
}

answered Mar 19, 2014 at 20:59

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Huangism · Accepted Answer · 2014-03-19 20:59:29Z

2

This will work

.container .some_class:first-child button {
    /* rules here */
}

http://jsfiddle.net/cUu82/1/

you could just use .some_class:first-child button as well if these are the only ones on the page

The first-child (https://developer.mozilla.org/en/docs/Web/CSS/:first-child) will select the first some_class div which was probably your only issue

answered Mar 19, 2014 at 20:59

Huangism

16.5k7 gold badges50 silver badges75 bronze badges

Collectives™ on Stack Overflow

CSS selector for the first element of class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related