Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:nth-child

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

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

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: ко всем элементам.

Значения

Значением псевдокласса :nth-child является указание в скобках ключевого слова, числа или арифметического выражения определяющего выборку дочерних элементов.

  • even — стили будут применены к каждому четному дочернему элементу (2,4,6,8...).
  • odd — применение стилей к каждому нечетному дочернему элементу (1,3,5,7...).
  • Число — любое положительное число, указывающее номер элемента , где единица (1) соответствует первому дочернему элементу. Кстати, :nth-child(1) то же самое, что и :first-child.
  • Выражение — арифметическое выражение с общим видом an+b или an-b, где a и b положительные, отрицательные числа или ноль, а n — множитель, принимающий значения 0,1,2,3,4... Например, 2n+3 даст последовательность 3,5,7,9... выбранных дочерних элементов. Если b равно нулю, то его можно не указывать, например 2n или 7n. Если a равно нулю, то значение соответствует числу указанному в b.

Если в результате вычисления последовательности некоторые числа окажутся отрицательными или равными нулю, то браузеры их проигнорируют. Например, 2n-4 даст -4,-2,0,2,4,6..., но будут использованы только 2,4,6...

Синтаксис

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

Пример CSS: использование :nth-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :nth-child</title>
  <style type="text/css">
   p { margin: 0 } /* убираем внешние поля у параграфов */
   div:nth-child(odd) {
    color: red; /* цвет текста нечетных дочерних DIV */
   }
  </style>
 </head>
 <body>
  <div>1 блок DIV</div>
  <div>2 блок DIV</div>
  <div>3 блок DIV</div>
  <p>1 параграф</p>
  <div>4 блок DIV</div>
  <div>5 блок DIV</div>
  <p>2 параграф</p>
  <p>3 параграф</p>
  <div>6 блок DIV</div>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS :nth-child.

Использование псевдокласса CSS :nth-child

Обратите внимание, что в примере отсчет ведется с учетом всех дочерних элементов тега <BODY> и стили применяются только к тем <DIV>, которые являются нечетными в общем списке.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и 3.03.6 и выше9.2 9.6 и выше3.1 и выше
Поддержка:НетДаДаНетДаНетДаДа
CSS по алфавиту
CSS по назначению