W3docs
ru
Войти

CSS псевдокласс :nth-of-type()

Псевдокласс :nth-of-type() выбирает элементы одного типа по их позиции. Узнайте о нём и попрактикуйтесь на примерах.

Псевдокласс :nth-of-type() сопоставляет элементы на основе их позиции среди однотипных соседних элементов (с одинаковым именем тега). Счёт начинается с 1, поэтому p:nth-of-type(1) — это первый <p> в родителе, второй <p> — это 2, и так далее.

Аргумент в скобках может быть отдельным числом, ключевым словом odd или even, либо формулой вида an + b. Это делает псевдокласс гибким инструментом для стилизации «каждого третьего элемента», «всех чётных строк» или «всего после первого» без добавления лишних классов в HTML.

:nth-of-type() vs :nth-child()

Это различие чаще всего вызывает путаницу, поэтому стоит разобраться в нём подробнее.

  • :nth-child() учитывает все дочерние элементы, а затем проверяет, является ли совпавший элемент нужным типом.
  • :nth-of-type() учитывает только соседние элементы того же типа, игнорируя всё остальное.

Рассмотрим следующую разметку:

<div>
  <h2>Heading</h2>
  <p>Paragraph A</p>
  <p>Paragraph B</p>
</div>
  • p:nth-child(2) выбирает Paragraph A — это 2-й дочерний элемент в целом, и он является <p>.
  • p:nth-of-type(2) выбирает Paragraph B — это 2-й элемент <p>, независимо от того, что перед ним стоит <h2>.

Используйте :nth-of-type(), когда родитель содержит элементы разных типов, а вам нужно считать только один из них.

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

CSS синтаксис :nth-of-type()

:nth-of-type(number | odd | even | an+b) {
  css declarations;
}

Аргумент принимает:

  • Число — :nth-of-type(3) выбирает 3-й элемент данного типа.
  • odd / even — удобные ключевые слова для чередующихся элементов (odd = 1, 3, 5…; even = 2, 4, 6…).
  • Формула an + b — например, :nth-of-type(3n) совпадает с каждым 3-м элементом, а :nth-of-type(2n+1) эквивалентно odd. Здесь n начинается с 0 и увеличивается, a — шаг, b — смещение.

Пример селектора :nth-of-type():

Пример кода CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Попробуйте сами »

Пример :nth-of-type со значениями "odd" и "even":

Ещё один пример кода CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(odd) {
        background: #1c87c9;
      }
      p:nth-of-type(even) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
  </body>
</html>
Попробуйте сами »

Использование формулы an+b

Формула позволяет задавать повторяющийся шаблон. В примере ниже выделяется каждый 3-й абзац (3n) и, отдельно, все абзацы начиная с 4-го (n+4):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3n) {
        background: #8ebf42;
      }
      p:nth-of-type(n + 4) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() formula example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

При 3n абзацы 3 и 6 получают зелёный фон. При n + 4 абзацы 4, 5 и 6 выделяются полужирным (каждый абзац начиная с 4-го).

Полезно знать

  • Счёт начинается с 1, а не с 0. :nth-of-type(1) — это первое совпадение, и оно ведёт себя как :first-of-type.
  • «Тип» означает имя тега, а не класс. :nth-of-type() не может считать элементы .item — он считает все элементы с данным тегом среди соседних. Если написать .item:nth-of-type(2), это совпадёт с элементом, который одновременно является 2-м элементом своего типа и имеет класс item.
  • Чтобы считать с конца списка, а не с начала, используйте :nth-last-of-type().

Связанные страницы

Практика

Практика
Что выбирает CSS селектор :nth-of-type()?
Что выбирает CSS селектор :nth-of-type()?
Was this page helpful?