Селектор Nth-of-type в CSS: выбор и стилизация определенного типа элементов

Nth-of-type в CSS используется для выбора определенного элемента, который является n-ым дочерним элементом своего родителя и имеет определенный тип (тег).

Синтаксис nth-of-type выглядит следующим образом:

css
selector:nth-of-type(n) {
  /* стили */
}

где selector - это селектор, который указывает на родительский элемент, n - числовое значение, указывающее, какой дочерний элемент нужно выбрать.

Рассмотрим пример использования nth-of-type для выбора каждого второго элемента типа div:

html

  
Первый параграф
  
Первый div
  
Второй div
  
Второй параграф
  
Третий div
  
Четвертый div

css
div:nth-of-type(2n) {
  color: red;
}

В данном примере выбранными будут элементы "Второй div" и "Четвертый div", так как они являются каждыми вторыми элементами типа div.

Теперь рассмотрим пример использования nth-of-type для выбора каждого третьего элемента типа параграф:

html

  
Первый параграф
  
Первый div
  
Второй параграф
  
Второй div
  
Третий параграф
  
Третий div

css
p:nth-of-type(3n) {
  font-weight: bold;
}

В данном примере выбранными будут элементы "Третий параграф", так как он является каждым третьим элементом типа параграф.

CSS-свойство nth-of-type позволяет гибко выбирать и стилизовать определенные элементы на основе их порядка и типа. Это может быть полезно при создании адаптивных дизайнов или при выборе конкретных элементов для стилизации.