Изучаем псевдоклассы nth child CSS и nth of type CSS

nth child CSS - это псевдокласс, используемый для выбора элементов с помощью числового выражения. Его синтаксис на первый взгляд может показаться немного запутанным.

В этой статье мы рассмотрим:

• различные способы использования :nth-child;
• более гибкий селектор :nth-of-type;
• и связанные с ними селекторы :nth last child CSS и :nth last of type CSS.

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

li:nth-child(выражение); {}

«Выражение» может быть представлено ключевыми словами even или odd, целым числом или формулой по типу an+b, где a и b - целые числа, положительные или отрицательные.

Поскольку псевдокласс nth child CSS может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

<ul> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li>  
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
</ul>

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3). Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth child odd, чтобы выбрать все элементы с нечетным номером.

nth child CSS каждый 3 й - указываем li:nth-child(3n). Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4). Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5).

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1. Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b, дочерние элементы разбиваются на группы. Если это выражение 2n+1, дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1. Соответствующий элемент в каждой группе - это индекс номер b. В нашем примере это будет первый элемент.

Если выражение 3n+2, элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b. Но отсчитывается он в обратном направлении от индекса 1. В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в nth child CSS может быть выражено как 2n. В этом случае у нас нет значения b, поэтому выбирается каждый элемент группы с индексом a; 2n выбирает каждый второй элемент, 3n - каждый третий, 4n - каждый четвертый и так далее.

Лично я считаю, что концепция разбивки дочерних элементов на группы и поиска индекса соответствия для каждой группы очень запутана. Хотя именно так их описывает спецификация CSS-селекторов.

Мне больше нравится концепция поиска каждого n-ного элемента - каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения - это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1».

Если выражение 3n-5, оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5».

Другие селекторы :nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child, который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1), но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child. При этом только :first-child работает в IE8, а :last-child и :nth-селекторы - нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс nth child CSS  отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

<section> 
  <h1>lorem ipsum;</h1> 
  <p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p> 
  <p>Nunc sed turpis. Donec posuere vulputate arcu;</p> 
</section>

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em.

Можно попробовать применить код section p:first-child, так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела - h1. В этом случае необходимо использовать селектор :first of type CSS.

Существует целый ряд селекторов этого типа - :first-of-type, :last-of-type, :nth of type и :nth-last-of-type. Они ведут себя так же, как :nth-child, но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9, в IE8 поддерживается только :first child CSS. В прошлом они не раз помогли мне решить несколько сложных задач.