Заданные условные элементы в своих родителях
:nth-of-type(arg)1.9 :nth-last-of-type(arg)1.9
Различия двух представленных селекторов заключается только в том, что :nth-last-of-type() рассматривает позиции элементов в обратном порядке (т. е. с конца).
:nth-of-type() — фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:
- Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.
- Внутри каждой группы будут выбираться те из элементов, которые находятся в своей группе на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент). Эти элементы и станут результатом работы селектора :nth-of-type().
Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!
Параметр arg может принимать следующие значения:
- index — элементы, находящиеся в своей группе на позиции index.
- even — элементы, находящиеся в своей группе на четных позициях.
- odd — элементы, находящиеся на нечетных позициях.
- equation — выражение, описывающее номер позиции элемента. Выражение должно быть целочисленным и зависеть от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (чтобы это понять, нужно, вместо n подставлять значения 0, 1, 2 и далее).
Примеры использования:
$('div:nth-of-type(3)') | вернет каждый третий div-элемент, встреченный в своем непосредственном предке. |
$('div:nth-of-type(odd)') | вернет каждый нечетный div-элемент, встреченный в своем непосредственном предке. |
$('div:nth-of-type(even)') | вернет каждый четный div-элемент, встреченный в своем непосредственном предке. |
$('div:nth-of-type(2n+3)') | вернет каждый 2n+3-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке. |
Пример 1
Продемонстрируем как работает :nth-last-of-type() с разными параметрами: