MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Описание

CSS псевдокласс :nth-child(an+b) находит элемент, имеющий an+b-1 потомков в дереве документа до данной позиции, значение для может быть положительным или нулевым, а также имеющий родительский элемент. Проще говоря, селектор находит номер потомка, числовая позиция которого подходит паттерну an+b.

Несколько примеров:

  • 1n+0, или просто n, найдёт каждого потомка. n не работает на Android Browser 4.3 и ниже, в то время как 1n работает. 1n делает тоже, что и 1n+0. Не стесняйтесь использовать тот, который вам нравится больше.
  • 2n+0, или просто 2n, найдёт детей под номерами 2, 4, 6, 8 и т.д. Вы можете заменить это выражение на ключевое слово even.
  • 2n+1 найдёт потомков 1, 3, 5, 7 и т.д. Вы можете заменить этот селектор на odd.
  • 3n+4 найдёт элементы с номерами 4, 7, 10, 13 и т.д.

Значение a и b должны быть целыми числами, а индекс первого элемента - 1. Другими словами, этот псевдокласс находит всех детей, чей индекс попадает в { an + b; n = 0, 1, 2, ... }.

Частый случай использования - разукраска столбцов таблиц.

Синтаксис

element:nth-child(an + b) {стили }

Примеры

Примеры селекторов

tr:nth-child(2n+1)
Находит нечётные ряды HTML таблицы.
tr:nth-child(odd)
Ищет нечётные ряды HTML таблицы.
tr:nth-child(2n)
Находит чётные ряды HTML таблицы.
tr:nth-child(even)
Ищет чётные ряды HTML таблицы.
span:nth-child(0n+1)
Находит элемент span, являющиймя первым потомком родителя; т.е. результат эквивалентен :first-child.
span:nth-child(1)
Идентичен предыдущему.
span:nth-child(-n+3)
Найдёт, если элемент один первых 3 детей его родителя и span.
 {span:nth-child(1):nth-last-child(2),
 span:nth-child(2):nth-last-child(1)}
Найдёт первый и второй элемент, при условии,что элементов не больше двух.
{span:only-child,
 span:nth-child(1):nth-last-child(2),
 span:nth-child(2):nth-last-child(1)}
Найдет единственного элемент либо найдёт первый и второй элемент, при условии,что элементов не больше двух.

Полный пример

Следующий HTML...

<p><code>span:nth-child(2n+1)</code>, <em>без</em> <code>&lt;em&gt;</code>
 среди детей. Дети 1, 3, 5 и 7 выбираются, как ожидается.</p>

<div class="first">
      <span>Этот span не выбран!</span>
      <span>Этот тоже :(</span>
      <span>Что насчёт этого?</span>
      <span>А этого?</span>
      <span>Другой пример</span>
      <span>Ещё другой пример</span>
      <span>Иииии другой</span>
</div>

<p><code>span:nth-child(2n+1)</code>, <em>с</em> <code>&lt;em&gt;</code>
 среди детей. Потомки 1, 5 и 7 будут выбраны. 3 используется в подсчёте, т.к. потомок, но не выбирается, т.к. не <code>&lt;span&gt;</code>.</p>

<div class="second">
      <span>Этот span не выбран!</span>
      <span>Этот тоже :(</span>
      <em>Это em.</em>
      <span>А этого?</span>
      <span>Другой пример</span>
      <span>Ещё другой пример</span>
      <span>Иииии другой</span>
</div>

<p><code>span:nth-of-type(2n+1)</code>, <em>с</em> <code>&lt;em&gt;</code>
 среди потомков. Будут выбраны дети 1, 4, 6 и 8. 3 не используется в подсчёте и не выбирается, т.к. <code>&lt;em&gt;</code>, 
не <code>&lt;span&gt;</code>, а <code>nth-of-type</code> выбирает только детей этого типа. <code>&lt;em&gt;</code> полностью пропускается и игнорируется.</p>
 
  <div class="third">
      <span>Этот span не выбран!</span>
      <span>Этот тоже :(</span>
      <em>Это em.</em>
      <span>А этого?</span>
      <span>Другой пример</span>
      <span>Ещё другой пример</span>
      <span>Иииии другой</span>
</div>

<div class="fourth"> 
     <span>Этот span не выбран!</span>   
     <span>Этот тоже :(</span>   <em>Это em.</em> 
     <span>А этого?</span>   
     <span>Другой пример</span>   
     <span>Ещё другой пример</span> <span>Иииии другой</span> 
</div>

Если элементов не бодее одного или двух 
<div class="fourth">
     <span>Этот span выбран!</span>  
     <span>Этот тоже :(</span>   <em>Это em.</em>
</div>

 

...использует этот CSS...

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
    
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}  
.fourth {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: red;
}

...результат будет таким:

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение ':nth-child' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':nth-child' в этой спецификации.
Рекомендация Изначальное определение

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Замечания

  • В Opera не срабатывает при динамической вставке элементов.

Смотрите также

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: vislogurov, BychekRU
 Обновлялась последний раз: vislogurov,