Development | Amber | Комментировать запись

В CSS есть несколько псевдоклассов, которые помогут вам быстро оформить ваше приложение. Наличие большого количества опций может быть как плюсом, так и минусом: не всегда сразу понятно, какой псевдокласс использовать и что он на самом деле делает. В данном мануале мы подробно рассмотрим CSS-псевдоклассы nth-child и nth-of-type, чтобы лучше понять, когда их использовать и в чем на самом деле разница.

CSS-псевдоклассы nth-child и nth-of-type интересно изучать именно в сравнении с другими типами псевдоклассов, поскольку они выбирают элементы на основе их положения в DOM. В то время как некоторые псевдоклассы выбирают конкретное состояние элемента (например, к таким относятся hover, active, target), nth-child и nth-of-type больше связаны со структурой разметки.

Требования

• Общие навыки работы с HTML5. Если вам нужно освежить свои знания или вы хотите получить всесторонний обзор языка разметки HTML5, изучите серию руководств «Как создать веб-сайт в HTML».
• Общие навыки работы с CSS.

Создание тестового HTML

Чтобы понять разницу между nth-child и nth-of-type, давайте сначала создадим наш тестовый HTML, чтобы на его примере увидеть разницу.

Допустим, у нас есть страница, а на этой странице есть раздел, который состоит из элементов заголовка (<h1>, <h3>) и абзаца (<p>).

<article>
  <h1>Here's a Header</h1>
  <p>I'm a paragraph with all kinds of information.</p>
  <p>Let's add another paragraph for fun.</p>
  <p>yadda yadda yadda</p>
  <p>blah blah blah</p>
  <p>yadda yadda yadda</p>
  <h3>Here's a Subheader</h3>
  <p>blah blah blah</p>
  <p>And maybe just one more.</p>
</article>

Данный HTML выглядит так:

По итогу у нас есть родительский элемент <article> и девять дочерних элементов: один тег <h1>, один <h3> и семь тегов <p>.

Синтаксис nth-child и nth-of-type

Есть несколько вариантов того, какие значения вы можете передать псевдоклассам nth-child и nth-of-type. Давайте посмотрим, как это делается.

Примечание: В примерах ниже используется nth-child, но его можно заменить на nth-of-type.

• :nth-child(2n+3): этот параметр требует некоторых вычислений. Цифры могут быть любыми на ваш выбор; а n будет меняться. Данный псевдокласс возьмет выбранные вами элементы, для начала установит в n значение 0 и начнет сложение из этой точки. Таким образом, он работает аналогично циклу for в JavaScript. Он будет перебирать выбранные вами элементы, обновляя значение n, например, вот так: 2(0)+3 = 3, 2(1)+3 = 5, 2(2)+3 = 7, и так далее. В результате псевдокласс выберет третий, пятый, седьмой элемент и т.д.
• :nth-child(odd/even): передавая псевдоклассу строки odd и even (нечетные или четные), вы можете выбрать доступные нечетные и четные элементы.
• :nth-child(3n): также можно передать число с переменной n, которая выберет интервал появления заданного элемента. Например, если передано 3, будут выбраны третий, шестой, девятый и элементы т. д.
• :nth-child(3): если вы просто передадите число (без n), псевдокласс выберет именно этот элемент из DOM. При передаче 3 будет выбран только третий элемент.

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

Псевдокласс nth-child имеет два важных компонента, которые следует учитывать:

• выбранные элементы, к которым будет применен псевдокласс.
• переданное псевдоклассу значение.

Приступим к созданию таблицы стилей CSS для приведенного выше примера HTML. Мы можем выбрать элементы абзаца и сделать цвет шрифта темно-бордовым вот так:

article p {
  color: maroon;
}

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

article p:nth-child(odd) {
  color: goldenrod;
}

Теперь абзацы изменили свой цвет. Вы заметили, что произошло? Цвета чередуются: сначала идет бордовый цвет, а затем желтый. Давайте посмотрим, почему это произошло.

Определение элементов, выбранных с помощью nth-child

В приведенном выше примере абзацы, соответствующие стилю p:nth-child(odd), должны отвечать следующим требованиям:

• они должны быть нечетными дочерними элементами родительского элемента
• они должны быть элементами абзаца

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

Абзацы, к которым применен желтый цвет, являются нечетными дочерними элементами абзаца (<p>). Это объясняет, почему абзац после подзаголовка по умолчанию имеет темно-бордовый цвет — на самом деле это «четный» дочерний элемент (нечетный достался заголовку, но такие элементы не отвечают выборке псевдокласса).

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

Псевдокласс nth-of-type очень похож на nth-child. Основное отличие между ними состоит в том, что nth-of-type отдельно рассматривает тип выбираемого элемента перед проверкой любой другой логики.

Давайте воспользуемся нашим предыдущим примером, но вместо этого применим nth-of-type.

<article>
  <h1>Here's a Header</h1>
  <p>I'm a paragraph with all kinds of information.</p>
  <p>Let's add another paragraph for fun.</p>
  <p>yadda yadda yadda</p>
  <p>blah blah blah</p>
  <p>yadda yadda yadda</p>
  <h3>Here's a Subheader</h3>
  <p>blah blah blah</p>
  <p>And maybe just one more.</p>
</article>

Стили:

article p {
  color: maroon;
}

article p:nth-of-type(odd) {
  color: goldenrod;
}

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

Теперь стили применяются, если элемент соответствует следующим требованиям:

• Он представляет собой абзац, родительский элемент которого – article.
• Он является нечетным элементом.

Если мы посмотрим на это внимательнее, станет немного яснее, как этот псевдокласс выбирает нужные элементы.

Заголовки (<h1>, <h3>) вообще не учитываются псвдоклассом nth-of-type, потому что он выбирает конкретно по типу элемента. В данном случае его интересуют только элементы <p>.

В конечном итоге выбор между псевдоклассами nth-child и nth-of-type будет зависеть от того, какого стиля вы хотите достичь.

Как правило, если нужно выбрать какой-то интервал независимо от типа элемента, используется nth-child. Однако если нужно выбрать только определенный тип, используется nth-of-type.

Заключение

Селекторы nth-child и nth-of-type отлично поддерживаются браузерами. Проверьте nth-child и nth-of-type на CanIUse.com, чтобы узнать больше.

Читайте также: Что такое специфичность в CSS