Выберите первый ребенок в гнездовом DIV

Question

У меня есть следующий:

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

На каждом .row, я хочу выбрать первую .form-control. Я попробовал .row .form-control:first-child, но он выбирает все .form-control. Что я сделал не так?

Answer 1

Это потому, что он ищет первое вхождение form-control в родительской группе. Вам просто нужно настроить свой селектор, чтобы принять первое появление ребенка <div> в .row.

Я видел потенциальную проблему с этим селектором, однако, если первый ребенок <div> не тот, который содержит .form-control, но я не знаю полной степени вашей разметки, так что это может работать нормально.

.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>

Answer 2

The :first-child и :first-of-type селекторов работают относительно родительского элемента. В вашем селекторе дети ищутся в .row. Поэтому, когда он достигает .row, он отправляется в col-xs-4 и col-xs-8 родителями, которых он ищет, ссылаясь на эти col-xs. Таким образом, он видит .form-control в обоих случаях, и в обоих случаях .form-control - это первые дети, поэтому он выбирает оба из них как в .row.

Если вы используете ту же структуру, что вы можете сделать это:

.row .col-xs-4 .form-control { 
    background-color:red; 
} 

В этом случае .col-xs-4 всегда приходит первым, так это выглядит для .form-control только в первом столбце.

Теперь скажите, что у вас была другая разметка, а вместо .col-xs-4 и .col-xs-8 у вас было два .col-xs-4. в этом случае вы можете сделать это:

.row .col-xs-4:first-of-type .form-control { 
    background-color:red; 
} 

jsFiddle: http://jsfiddle.net/4mfvs2sc/ [различные столбцы] http://jsfiddle.net/rmggct9v/ [одинаковые столбцы]

Надежда, что помогает!