Псевдокласс nth-child выбирает элемент, который является n-ным потомком родителя.

Синтаксис

селектор:nth-child(число | odd | even | выражение) {
	
}

Значения

Значение Описание
Число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd Нечетные элементы.
even Четные элементы.
Выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n - значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 - такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 - второй элемент, если n = 2, 2n дает 4 - четвертый элемент. Если написать 3n - это будет каждый третий элемент (начиная с третьего!), и так далее.

Примеры

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым потомком своего родителя (4-тым внутри ol):

li:nth-child(4) {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт

Пример

Сейчас красными сделаем все четные li:

li:nth-child(even) {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт

Пример

Сейчас красными сделаем все нечетные li:

li:nth-child(odd) {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт

Пример

Сейчас красными сделаем каждую третью li (начиная с третьей):

li:nth-child(3n) {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт

Пример

В селекторе можно указать диапазон элементов. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт
  12. пункт
  13. пункт
  14. пункт
  15. пункт
  16. пункт
  17. пункт
  18. пункт
  19. пункт
  20. пункт