Помогите разобраться с селекторами css

Как например задать класс второму по счету div, или задать только первому нужные стили, если у каждого однаковые названия классов? Немного не понятно с уровнями, как правильно задавать по уровню, что бы не плодить css классы?

Ответ

Для добавления стиля к элементам на основе нумерации в дереве элементов используется псевдокласс :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; }

А для стилизации первого элемента используйте псевдокласс :nth-child(1) или же :first-child
.child{ background:green; width:150px; height:100px; } .child:first-child{ background:#ccc; width:100px; height:50px; }