css каждый второй элемент

  • Автор темы Lucania
  • Обновлено
  • 05, May 2023
  • #1
Чтобы выбрать каждый второй элемент в CSS, можно использовать псевдокласс
 nth-child
в комбинации с числом, указывающим, какой элемент нужно выбрать.

Для выбора каждого второго элемента можно использовать формулу
 2n
, которая соответствует четным элементам, или
 2n+1
, которая соответствует нечетным элементам.

Вот пример CSS-кода, который применяет стиль к каждому второму элементу списка
 ul
:

cssCopy code

 ul li:nth-child(2n) {
 background-color: lightgray;
}


В этом примере
 nth-child(2n)
выбирает каждый второй элемент списка
 li
, начиная с первого элемента.

Можно изменить число в скобках, чтобы выбрать элементы с другими порядковыми номерами.

Если вы хотите применить стиль к каждому второму элементу списка, начиная со второго элемента, можно использовать формулу
 2n+2
:

cssCopy code

 ul li:nth-child(2n+2) {
 background-color: lightgray;
}


В этом примере
 nth-child(2n+2)
выбирает каждый второй элемент списка
 li
, начиная со второго элемента.

Lucania


Рег
02 Feb, 2023

Тем
14666

Постов
27389

Баллов
100779
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно