:nth-child — CSS | MDN

CSS псевдокласс :nth-child() находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

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

Ключевые слова

odd

Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.

even

Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

Функциональная запись

<An+B>

Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть

<integer>s.

Формальный синтаксис

Error: could not find syntax for this item

Примеры селекторов

tr:nth-child(odd) или tr:nth-child(2n+1)

Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.

tr:nth-child(even) or tr:nth-child(2n)

Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.

:nth-child(7)

Описывает седьмой элемент.

:nth-child(5n)

Описывает элементы с номерами 5, 10, 15, и т. д.

:nth-child(3n+4)

Описывает элементы с номерами 4, 7, 10, 13, и т. д.

:nth-child(-n+3)

Описывает первые три элемента среди группы соседних элементов.

p:nth-child(n)

Описывает каждый элемент <p> среди группы соседних элементов. Эквивалентно простому селектору p.

p:nth-child(1) или p:nth-child(0n+1)

Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

Подробный пример

HTML
<h4><code>span:nth-child(2n+1)</code>, БЕЗ элемента
   <code>&lt;em">&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div>
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>
<br>
<h4><code>span:nth-child(2n+1)</code>, С элементом
   <code>&lt;em">&gt;</code> в группе элементов-потомков.
 
 
 </h4>
<p>Элементы 1, 5 и 7 будут выбраны.<br>
   3 используется в подсчёте потому что это элемент-потомок,
   но он не выбран потому что он не <code>&lt;span">&gt;</code>.</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>
<br>
<h4><code>span:nth-of-type(2n+1)</code>, С элементом
   <code>&lt;em">&gt;</code> в группе элементов-потомков.</h4>
<p>Элементы 1, 4, 6 и 8 будут выбраны.<br>
   3 не используется в подсчёте и не выбран, потому что это <code>&lt;em">&gt;</code>,
   но не <code>&lt;span">&gt;</code>, а <code>nth-of-type</code> выбирает только
   потомков этого типа. Элемент <code>&lt;em">&gt;</code> полностью пропускается и игнорируется.
 
 </p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
CSS
html {
  font-family: sans-serif;
}
span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}
Результат
Specification
Selectors Level 4
# nth-child-pseudo

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • :nth-of-type, :nth-last-child

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

:nth-child() ⚡️ HTML и CSS с примерами кода

Псевдокласс

:nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2
…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Результат для различных значений псевдокласса

ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child
55Пятый элемент
2n2, 4, 6, 8, 10,…Все чётные элементы, аналог значения even
2n+11, 3, 5, 7, 9,…Все нечётные элементы, аналог значения odd
3n3, 6, 9, 12, 15,…Каждый третий элемент
3n+22, 5, 8, 11, 14,…Каждый третий элемент, начиная со второго
n+44, 5, 6, 7, 8,…Все элементы, кроме первых трёх
-n+33, 2, 1Первые три элемента
5n-23, 8, 13, 18, 23,…—
even2, 4, 6, 8, 10,…Все чётные элементы
odd1, 3, 5, 7, 9,…Все нечётные элементы

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n + 2):nth-child(-n + 5) {
  /* … */
}

Спецификации

  • Selectors Level 4
  • Selectors Level 3

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>nth-child</title>
    <style>
      table {
        width: 100%; /* Ширина таблицы */
        border-spacing: 0; /* Расстояние между ячейками */
      }
      tr:nth-child(2n) {
        background: #f0f0f0; /* Цвет фона */
      }
      tr:nth-child(1) {
        background: #666; /* Цвет фона */
        color: #fff; /* Цвет текста */
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>&nbsp;</td>
        <td>2134</td>
        <td>2135</td>
        <td>2136</td>
        <td>2137</td>
        <td>2138</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>16</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
      <tr>
        <td>Камни</td>
        <td>23</td>
        <td>34</td>
        <td>88</td>
        <td>53</td>
        <td>103</td>
      </tr>
    </table>
  </body>
</html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Пример 2

HTMLCSSРезультат

<h4>
  <code>span:nth-child(2n+1)</code>, БЕЗ элемента
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div>
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>
<br />
<h4>
  <code>span:nth-child(2n+1)</code>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 5 и 7 будут выбраны.<br />
  3 используется в подсчёте потому что это элемент-потомок,
  но он не выбран потому что он не
  <code>&lt;span&gt;</code>.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`. </em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>
<br />
<h4>
  <code>span:nth-of-type(2n+1)</code>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 4, 6 и 8 будут выбраны.<br />
  3 не используется в подсчёте и не выбран, потому что это
  <code>&lt;em&gt;</code>, но не <code>&lt;span&gt;</code>,
  а <code>nth-of-type</code> выбирает только потомков этого
  типа. Элемент <code>&lt;em&gt;</code> полностью
  пропускается и игнорируется.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

html {
  font-family: sans-serif;
}
span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
. first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

См. также

  • :nth-of-type
  • :nth-last-child

Ссылки

  • Псевдо-класс :nth-child MDN (рус.)

Nth Определение и значение — Merriam-Webster

ˈen(t)th 

1

: пронумерованы с неопределенным или неопределенно большим порядковым номером

в энный раз

2

: крайний, предельный

в энной степени

Синонимы

  • непревзойденный
  • последний
  • макс.
  • максимум
  • наиболее
  • снаружи
  • главное
  • высший
  • топ
  • окончательный
  • максимальный
  • крайний

Просмотреть все синонимы и антонимы в тезаурусе 

Примеры предложений

преувеличивает до nth степень обо всем, что она когда-либо делала

Недавние примеры в Интернете Квотербек Buccaneers Том Брэди попал в НФЛ. История в воскресенье в -й -й раз в его карьере. — Деррик Классен, New York Times , 8 января 2023 г. В то время как извне заглядывают внутрь, культура пресс-службы пытается контролировать внешний профиль профессиональных игроков до й градус. — Генри Флинн, Forbes , 31 декабря 2022 г. И курирование этой одежды было тщательно продумано до -й -й степени. — Элис Ньюболд, Vogue , 9 декабря 2022 г. Со временем это намерение перерастает в привычку или, еще лучше, в мудрый ритуал принятия решений по приказу nth , что приводит к последовательному сокращению плохих результатов и увеличению хороших. — Тим Маурер, 9 лет0053 Forbes , 27 марта 2022 г. Для этой прогулки этот репортер склонен говорить Гескьер, а не размышлять о сегодняшнем бурном духе времени, просто поставил моду на -й -й градус. — Роксана Робинсон, Forbes , 5 октября 2022 г. Построенный с использованием новой платформы Mercedes EVA2 для электромобилей, EQE, очевидно, связан с EQS; две машины выглядят одинаково, будучи оптимизированными для nth градусов по аэродинамической трубе и вычислительной гидродинамике. — Джонатан М. Гитлин, Ars Technica , 27 сентября 2022 г. Ожидается, что -й сиквел в обширной MCU принесет за выходные от 145 до 155 миллионов долларов, а по некоторым оценкам, достигнет 170 миллионов долларов. — Ребекка Рубин, Variety , 6 июля 2022 г. Тем не менее, ее роман с Беном Аффлеком — или, точнее, то, как он освещался, — на самом деле ознаменовал собой изменение культуры, усиление мании сплетнями до -й мощность. — Оуэн Глейберман, Variety , 8 июня 2022 г. Узнать больше

Эти примеры предложений автоматически выбираются из различных онлайн-источников новостей, чтобы отразить текущее использование слова «nth». Мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв.

История слов

Этимология

n (неопределенное число) + -th

Первое известное использование

1756, в значении, определенном в смысле 1

Путешественник во времени

Первое известное использование nth было в 1756 г.

Посмотреть другие слова того же года

Словарные статьи Около

-й

нтфи

энный

энтн

Посмотреть другие записи поблизости

Процитировать эту запись «Н-й».

Словарь Merriam-Webster.com , Merriam-Webster, https://www.merriam-webster.com/dictionary/nth. По состоянию на 6 марта 2023 г.

Копировать ссылку

Детское определение

nth

прилагательное

ˈen(t)th 

1

: пронумеровано неопределенным или неопределенно большим порядковым номером

для nth время

2

: предельный смысл 2, предельный

до степень

Последнее обновление: — Обновлены примеры предложений

Подпишитесь на крупнейший словарь Америки и получите тысячи дополнительных определений и расширенный поиск без рекламы!

Merriam-Webster без сокращений

оправдывать

См. Определения и примеры »

Получайте ежедневно по электронной почте Слово дня!

Сложные стандартизированные тестовые слова, Vol. 2

  • Новая компьютерная система предприятия не оказалась панацеей .
  • Препятствие Дорогостоящее бремя
  • Безопасное пространство Панацея

Проверьте свой словарный запас с помощью нашей викторины из 10 вопросов!

ПРОЙДИТЕ ТЕСТ

Сможете ли вы составить 12 слов из 7 букв?

PLAY

nth — Викисловарь

Содержание

  • 1 Английский
    • 1. 1 Альтернативные формы
    • 1.2 Произношение
    • 1.3 Прилагательное
      • 1.3.1 Синонимы
      • 1.3.2 Производные термины
      • 1.3.3 Переводы
    • 1.4 Существительное
      • 1.4.1 Переводы
    • 1.5 Анаграммы

Английский

  • Иногда пишется как н-й , н-й или н й .

    • Произношение[править]

    • enPR: ĕnth
    • МФА (ключ) : /ɛnθ/
    • Аудио (США) (файл)
    • Рифмы: -ɛnθ

    Прилагательное

    1. (математика) Встречается в позиции n в последовательности.
    2. (неофициальный) Встречается в относительно большой, но неуказанной позиции в серии.

      • 1922 , Эдгар Райс Берроуз, «Прелюдия», в «Марсианские шахматные фигуры» :

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

    Synonyms[edit]
    • (informal): umpteenth
    Derived terms[edit]
    • to the nth degree
    Translations[edit]

    occurring at position n