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>

Answer 1

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;
}