Select first-child in nested div

Question

I have the following:

<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[name]" id="order_name" />
    </div>
  </div>
  <div class="col-xs-8">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[email]" id="order_email" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[age]" id="order_age" />
    </div>
  </div>
  <div class="col-xs-8">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[address]" id="order_address" />
    </div>
  </div>
</div>

On every .row, I wanna select the first .form-control. I tried .row .form-control:first-child but it selects all .form-control. What have I done wrong?

Answer 1

That is because it is searching for the first occurrence of form-control within a parent group. You just need to adjust your selector to take the first occurrence of the child <div> in .row.

I could see a potential issue with this selector, however, if the first child <div> is not the one that contains a .form-control, but I don't know the full extent of your markup, so this could work just fine.

.row > div:first-child .form-control {
  background: red;
}

<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[name]" id="order_name" />
    </div>
  </div>
  <div class="col-xs-8">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[email]" id="order_email" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[age]" id="order_age" />
    </div>
  </div>
  <div class="col-xs-8">
    <div class="form-group">
      <input class="form-control" required="required" type="text" name="order[address]" id="order_address" />
    </div>
  </div>
</div>