2015-12-01 2 views
-2

Я в основном хочу сделать «второй столбец, а затем второй внизу» внутри этой колонки. Итак, идите два в меню, затем два вниз.Можно ли n-го дочернего элемента n-го дочернего элемента в псевдо-классах css?

Спасибо.

<div class="row ms-category">  
      <div class="col-category col-xs-3"> 
       <a class="form-group level1" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
      </div> 

      <div class="col-category col-xs-3"> 
       < <a class="form-group level1" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
      </div> 

      <div class="col-category col-xs-3"> 
       <a class="form-group level1" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
       <a class="form-group level2" href="">title</a> 
      </div> 

    </div> 
+5

Вы пробовали это? –

+0

Вы хотели что-то вставить? – jord49

+0

Это зависит от вашей структуры (все элементы имеют один и тот же родительский элемент или один родительский элемент в строке элементов или один родительский элемент в столбце элементов). Все ответы, не видя вашей разметки (HTML), могут оказаться неправильными, потому что они будут основаны на предположениях. – Harry

ответ

2

Уверенный, что это. Вы можете использовать один из псевдо-классов, как nth-child:

div.row > div:nth-child(2) > a:nth-child(2){ 
 
    background: red; 
 
}
<div class="row ms-category"> 
 
    <div class="col-category col-xs-3"> 
 
    <a class="form-group level1" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    </div> 
 

 
    <div class="col-category col-xs-3"> 
 
    <a class="form-group level1" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    </div> 
 

 
    <div class="col-category col-xs-3"> 
 
    <a class="form-group level1" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    <a class="form-group level2" href="">title</a> 
 
    </div> 
 

 
</div>

Псевдо-классы индексы начинаются с одной, так выше правило гласит: выберите второй якорь, который является потомком второго div, который является дочерним элементом любого div с классом строк.

+1

@ Харри - достаточно честный, обновленный. – j08691

Смежные вопросы