Заданные элементы в своих родителях

:nth-child(arg)1.1.4  :nth-child-last(arg)1.9

Соответствует элементам, которые расположены в своих непосредственных предках по определенным условиям. Различия двух представленных селекторов заключается только в том, что :nth-child-last() рассматривает позиции элементов в обратном порядке (т. е. с конца).

Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!

Параметр arg может принимать следующие значения:

  • index — номер позиции элемента, внутри его непосредственного родителя.
  • even — элементы, находящиеся на четных позициях, внутри его непосредственного родителя.
  • odd — элементы, находящиеся на нечетных позициях, внутри его непосредственного родителя.
  • equation — выражение, описывающее номер позиции элемента, внутри его непосредственного родителя. Выражение должно быть целочисленным и зависеть от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (то есть вместо n будут подставляться значения 0, 1, 2 и далее).

Примеры использования:

$('div:nth-child(3)') вернет все div-элементы, которые находятся в своих непосредственных предках третьими по счету.
$('div:nth-child(odd)') вернет все div-элементы, которые находятся в своих непосредственных предках на нечетных позициях.
$('div:nth-child(even)') вернет все div-элементы, которые находятся в своих непосредственных предках на четных позициях
$('div:nth-child(2n+3)') вернет все div-элементы, которые в непосредственных предках находятся на позиции с номерами удовлетворяющими выражению 2n+3 (5, 7, 9...).

Многие селекторы, например :eq(n), :even, :lt() и другие, фильтруют выбранные элементы, в зависимости от их расположения в наборе выбранных элементов. В отличии от них, :nth-child() и :nth-last-child() производят фильтрацию, опираясь на их расположение в непосредственных предках.

В действии

Пример 1

Отметим мужчин, стоящих в очереди на четных местах (элементы класса men, стоящие в элементах с классом queue (очередь) на четных позициях):


Пример 2

Продемонстрируем как работает :nth-child() с разными параметрами, а так же некоторые другие селекторы со схожими предназначениями:

Ссылки

Поисковые ключи:
  • заданные элементы в своих предках
  • nth-child