Для добавления стиля к элементам на основе нумерации в дереве элементов используется псевдокласс :nth-child
:
.class:nth-child(odd | even | <число> | <выражение>) {...
// Styles
}
Значения
odd - Все нечетные номера элементов.
even - Все четные номера элементов.
число - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение - Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2...
Примеры
В вашем случае для стилизации второго элемента используйте псевдокласс :nth-child(2)
:
.child{
background:green;
width:150px;
height:100px;
}
.child:nth-child(2){
background:#ccc;
width:100px;
height:50px;
}
<div class="selector">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
А для стилизации первого элемента используйте псевдокласс :nth-child(1)
или же :first-child
:
.child{
background:green;
width:150px;
height:100px;
}
.child:first-child{
background:#ccc;
width:100px;
height:50px;
}
<div class="selector">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>