Нацеливание на определенные элементы с именами классов: подход CSS nth-child

Задача: Выборочное оформление элементов с одинаковым именем класса на основе их позиции независимо от их расположения в разметке.

Решение: Использовать Псевдоселекторы nth-child() или nth-of-type() для выбора элементов в соответствии с их порядковым номером внутри родительского элемента.

nth-child() Псевдоселектор

Псевдоселектор nth-child(n) позволяет вам стилизовать элемент, который является n-м дочерним элементом своего родителя. Например, чтобы настроить таргетинг на первый элемент с классом «myclass»:

.parent_class:nth-child(1) {
  color: #000;
}

Чтобы выбрать второй и третий элементы, используйте следующие селекторы:

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

Псевдоселектор nth-of-type()

Псевдоселектор nth-of-type(n) работает аналогично nth-child(), но выбирает элементы на основе их тип внутри своего родителя. Это полезно, если у вас есть несколько элементов одного типа в родительском элементе:

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

Пример HTML:

  
my text1
  

  
my text2
  

  
my text3