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

#css #css_selectors

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




  

  

  

  





    

Ответы

Ответ 1

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

   

   

   




Ответ 2

Псевдокласс :nth-child Вам в помощь уважаемые ;)
Дальше уже дело креатива)
https://webref.ru/css/nth-child



.selector div {
  background-color:black;
  height:30px;
  margin-bottom:2.5px;
}

.selector div:nth-child(1) {
  background-color:red;
}
.selector div:nth-child(2) {
  background-color:green;
}
.selector div:nth-child(3) {
  background-color:blue;
}
.selector div:nth-child(4) {
}

  

  

  

  




Ответ 3

.child{
background:red;
width:150px;
height:100px;
}

.child:nth-child(2){
background:#ccc;
width:100px;
height:50px;
}