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

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

Псевдоклассы
  • :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()

Синтаксис

/* Выбирает каждый четвёртый элемент <p>
   среди любой группы соседних элементов.  */
p:nth-of-type(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.

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

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

ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-of-type.
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-of-type для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

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

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

  • Selectors Level 4
  • Selectors Level 3

Примеры

Пример 1

HTMLCSSРезультат

<div>
  <div>Этот элемент не учитывается.</div>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <div>Этот элемент не учитывается. </div>
  <p>Третий параграф.</p>
  <p>Четвёртый параграф.</p>
</div>

/* Нечётные параграфы */
p:nth-of-type(2n + 1) {
  color: red;
}
/* Чётные параграфы */
p:nth-of-type(2n) {
  color: blue;
}
/* Первый параграф */
p:nth-of-type(1) {
  font-weight: bold;
}

Пример 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>nth-of-type</title>
    <style>
      img:nth-of-type(2n + 1) {
        float: left;
      }
      img:nth-of-type(2n) {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>
      <img src="image/left-knight.gif" alt="" />
      <img src="image/right-knight.gif" alt="" />
    </p>
    <h2>Исторический турнир</h2>
  </body>
</html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому.

См.

также
  • :nth-child
  • :nth-last-of-type

Ссылки

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

Псевдокласс :nth-child | WebReference

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

Синтаксис

Селектор:nth-child(odd | even | <число> | <выражение>) {...}
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

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

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

Табл. 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) { … }

Пример

<!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).

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

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

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91219.53.13.5
2.119.53.1
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Псевдоклассы

См.

также
  • :nth-child()
  • :nth-of-type()
  • Нумерованные списки
  • Псевдокласс :nth-last-child
  • Псевдокласс :nth-last-of-type
  • Псевдокласс :nth-of-type

Рецепты

  • Как сделать нумерацию русскими буквами?

Практика

  • Зебра в таблице

:n-й ребенок | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 /* Выбор первого элемента списка */
li: nth-ребенок (1) { }
/* Выберите 5-й элемент списка */
li: nth-ребенок (5) { }
/* Выбираем все остальные элементы списка, начиная с первого */
li: nth-ребенок (нечетный) { }
/* Выбираем каждый третий элемент списка, начиная с первого */
li: n-й ребенок (3n - 2) { }
/* Выбрать каждый 3-й элемент списка, начиная со 2-го */
li: n-й ребенок (3n - 1) { }
/* Выбрать каждый 3-й дочерний элемент, если он имеет класс "el" */
. el:nth-child(3n) { }

Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и одноуровневыми элементами.

Предположим, мы создаем сетку CSS и хотим удалить поля на каждом четвертом модуле сетки. Вот этот HTML:

 

  
Один

  
Два

  
Три

  
Четыре

  
Пять

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

 .module:nth-child(4n) {
  поле справа: 0;
}

Селектор :nth-child принимает аргумент: это может быть одно целое число, ключевые слова четные , нечетные или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве JavaScript. Ключевые слова «четные» и «нечетные» являются прямыми (2, 4, 6 и т. д. или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an+b , где:

  • «a» — целое число
  • «n» — буквенная буква «n»
  • «+» — оператор, может быть как «+», так и «-»
  • «b» является целым числом и требуется, если в формулу включен оператор.

Важно отметить, что эта формула представляет собой уравнение и перебирает каждый родственный элемент, определяя, какой из них будет выбран. Часть «n» формулы, если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый четвертый элемент по формуле 4n , что сработало, потому что каждый раз, когда проверялся элемент, «n» увеличивалось на единицу (4×0, 4×1, 4×2, 4×3 и т. д.). Если порядок элемента соответствует результату уравнения, он выбирается (4, 8, 12 и т. д.). Для более подробного объяснения задействованной математики, пожалуйста, прочитайте эту статью.

Чтобы проиллюстрировать это далее, вот несколько примеров допустимых селекторов :nth-child :

К счастью, вам не всегда нужно выполнять расчеты самостоятельно — существует несколько :nth-child тестеров и генераторов:

  • Тестер CSS-Tricks
  • Тестер Леа Веру

:nth-child(an + b of

)

Существует малоизвестный фильтр, который можно добавить к :nth-child в соответствии со спецификацией CSS Selectors: Возможность выбора :nth-child подмножества элементов, используя формат из . Предположим, у вас есть список смешанного контента: у некоторых есть класс .video , у некоторых есть класс .picture , и вы хотите выбрать первые 3 изображения. Вы можете сделать это с помощью фильтра «из» следующим образом:

 :nth-child(-n+3 of .picture) {
  /*
     Выбирает первые 3 элемента
     применяется не ко ВСЕМ детям, а
     только тем, кто соответствует . picture
  */
}

Обратите внимание, что это отличается от добавления селектора непосредственно к селектору :nth-child :

 .picture:nth-child(-n+3) {
  /*
     Не то же самое!
     Это относится к элементам, соответствующим .picture
     которые _also_ соответствуют :nth-child(-n+3)
  */
}

Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу:

Браузер поддерживает фильтр «из» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые проблемы, связанные с :nth-child(an+b of s) :

  • Firefox: Поддержка nth-child(An+B of sel)
  • Chrome: Реализовать :nth-child(an+b of S)

Достопримечательности

  • :nth-child перебирает элементы, начиная с верхней части исходного порядка. Единственная разница между ним и :nth-last-child заключается в том, что последний перебирает элементы , начиная с нижней части исходного порядка .
  • Синтаксис для выбора первого n количества элементов несколько нелогичен. Вы начинаете с -n плюс положительное количество элементов, которые вы хотите выбрать. Например, li:nth-child(-n+3) выберет первые 3 элемента li .
  • Селектор :nth-child очень похож на :nth-of-type , но с одним важным отличием : он менее специфичен. В нашем примере выше они дадут тот же результат, потому что мы итерируем только .module элементов, но если бы мы итерировали более сложную группу братьев и сестер, :nth-child попытался бы сопоставить все элементы того же уровня, а не только братья и сестры одного и того же типа элемента. Это раскрывает силу :nth-child — может выбрать любой родственный элемент в аранжировке, а не только элементы, указанные перед двоеточием .
  • NTH-Last-Cill -child Рецепты
  • Mozilla Docs
  • Статья QuirksMode
  • Статья Sitepoint

Поддержка браузера

Хром Сафари Firefox Опера ИЭ Андроид iOS
Любой 3. 2+ Любой 9,5+ 9+ Любой Любой

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

:n-й тип | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Селектор :nth-of-type позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и одноуровневыми элементами.

Предположим, у нас есть неупорядоченный список, и мы хотим «зебру» чередовать элементы списка:

 
    
  
  • Первый элемент
    • 
  
  • Второй элемент
    • 
  
  • Третий элемент
    • 
  
  • Четвертый пункт
    • 
  
  • Пятый пункт
    •

Вместо добавления классов к каждому элементу списка (например, .even и .odd ) мы можем использовать :nth-of-type :

 li {
  фон: сланцево-серый;
}
/* выбор чередующихся элементов, начиная со второго элемента */
li: n-го типа (2n) {
  фон: светло-серый;
}

Как видите, :nth-of-type принимает аргумент: это может быть одно целое число, ключевые слова «четный» или «нечетный» или формула, как показано выше. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве в JavaScript. Ключевые слова «четный» и «нечетный» просты, но формула построена с использованием синтаксиса an+b , где:

  • «a» — целое число
  • «n» — буквенная буква «n»
  • «+» — оператор, может быть как «+», так и «-»
  • «b» является целым числом и является обязательным, если в формулу включен оператор.

Важно отметить, что эта формула представляет собой уравнение и выполняет итерации по каждому элементу того же уровня, определяя, какой из них будет выбран. Часть «n» формулы, если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый второй элемент по формуле 2n , что сработало, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (2×0, 2×1, 2×2, 2×3 и т. д.). Если порядок элемента соответствует результату уравнения, он выбирается (2, 4, 6 и т. д.). Для более подробного объяснения задействованной математики, пожалуйста, прочитайте эту статью.

Чтобы проиллюстрировать это далее, вот несколько примеров допустимых селекторов :nth-of-type :

К счастью, вам не всегда нужно делать математику самостоятельно — существует несколько :nth-of-type тестеров и генераторов:

  • Тестер CSS-трюков
  • Тестер Леа Веру

Точки интереса

  • :nth-of-type перебирает исходный порядок элементов, начиная с порядка. Единственная разница между ним и :nth-last-of-type заключается в том, что последний перебирает элементы , начиная с нижней части исходного порядка .
  • Селектор :nth-of-type очень похож на :nth-child но с одним критическим отличием: конкретнее. В нашем примере выше они дали бы тот же результат, потому что мы перебираем только li элементов, но если бы мы перебирали более сложную группу братьев и сестер, :nth-child попытался бы сопоставить все братья и сестры, а не только братья и сестры. того же типа элемента. Это раскрывает силу :nth-of-type — он нацелен на определенный тип элемента в расположении по отношению к подобным братьям и сестрам, а не ко всем братьям и сестрам .
  • nth-last-of-type
  • nth-child
  • nth-last-child
  • first-of-type
  • last-of-type

Other Resources

  • Mozilla Docs
  • QuirksMode статья
  • Sitepoint статья

Поддержка браузера

Данные о поддержке функции mdn-css__selectors__nth-of-type в основных браузерах.

:nth-of-type был представлен в модуле CSS Selectors 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых браузеров, либо полифил для IE, либо используйте эти селекторы некритичными способами, а-ля прогрессивное улучшение, что рекомендуется.

No related posts.