CSS selector for first instance of child with class? [duplicate]

Question

Is there a CSS selector for the first instance of a child with class? For example, take this code:

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

Is there a css selector to style the first occurrence of a div with class "child"?

Answer 1

You could style .child and revert styles for subsequent .child siblings using the general sibling combinator, ~:

.child {
  color: #ff0000;
}
.child ~ .child {
  color: inherit;
}

<div id="container">
  <div class="nothing">nothing
  </div>
  <div class="child">SELECT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
</div>