Товаров: 0 (0р.)

Nth type of: :nth-of-type — CSS | MDN

Содержание

Псевдокласс :nth-of-type | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+3.1+3.6+2.1+2.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

элемент:nth-of-type(odd | even | <число> | <выражение>) {…}

Значения

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Первый элемент.
55Пятый элемент.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14—
-n+33, 2, 1—
5n-23, 8, 13, 18, 23—
even2, 4, 6, 8, 10Все четные элементы.
odd
1, 3, 5, 7, 9		Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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="images/left.gif" alt="">
   <img src="images/right.gif" alt=""></p>
   <h2>Исторический турнир</h2>
 </body>
</html>

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

Рис. 1. Применение псевдокласса :nth-of-type к изображениям

Псевдокласс :nth-of-type | CSS | WebReference

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

Синтаксис 

Селектор:nth-of-type(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-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) { … }

Пример

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

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

Рис. 1. Применение псевдокласса :nth-of-type к изображениям

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

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

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

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

Различия между :nth-child и :nth-of-type / Хабр

Допустим, есть такой HTML:


<section>
<p>Little</p>
<p>Piggy</p> <!— Нужен этот элемент —>
</section>

Следующий CSS будет делать одно и тоже:


p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

  1. Этот элемент — параграф;
  2. Это второй элемент одного родителя.

Псевдокласс

:nth-of-type

, означает:


  1. Выбрать второй параграф одного родителя.

Предположим, что наша разметка изменена следующим образом:


<section>
<h2>Words</h2>
<p>Little</p>
<p>Piggy</p> <!— Нужен этот элемент —>
</section>

Теперь первый вариант не работает:


p:nth-child(2) { color: red; } /* Не работает */

Второй продолжает работать:


p:nth-of-type(2) { color: red; } /* Продолжает работать */

Под «Не работает» я имею ввиду, что cелектор

:nth-child

выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.

Если добавить <h3> после <h2>, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type продолжит работать.

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это :nth-child продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type (опять же, на мой взгляд).

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

dl :nth-child(2) { } /* Этот вариант лучше чем */
dd:nth-child(2) { } /* этот */

Но, конечно, все зависит от конкретной ситуации.

Поддержка браузерами :nth-of-type довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.

nth-of-type работает не так, как ожидалось



<div>
    <div></div>
    <div></div>
    <div></div>
</div>

почему?

.test3:nth-of-type(3) {height: 100px;background: black;}

работа, но

.test3:nth-of-type(1) {height: 100px;background: black;}

— нет? Является ли nth-type-of работа такой же, как nth-child в этом случае?

html css css-selectors
Поделиться Источник Ben     25 апреля 2017 в 07:29

3 ответа

  • CSS nth-of-type работает не так, как ожидалось

    Что я упускаю из функциональности селектора nth-of-type CSS3? Пожалуйста, посмотрите этот код http://codepen.io/tuleby/pen/oqKAG Желаемый результат — три четных ряда с 6 дивами на каждом, и таким образом 6 + 12 + 18 должно быть красным. Почему это не работает? Спасибо HTML: <div id=staff>…

  • nth-of-type ведет себя не так, как ожидалось

    HTML <div id=content> <div id=ok class=content-block warning><div></div><span>&#10003 Everything is OK!</span> </div> <div id=module_1 class=content-block small>asfdasdf</div> <div id=module_2 class=content-block…


8

Псевдо-селектор nth-of-type, безусловно, работает здесь, как и ожидалось.

От MDN :

Псевдокласс :nth-of-type(an+b) CSS соответствует элементу, у которого есть братья и сестры+b-1 с тем же именем элемента перед ним в дереве документов

Так

.test3:nth-of-type(3) {height: 100px;background: black;}

‘works’ потому что div с классом test3 также является третьим div в контейнере (div с классом test)

однако

.test3:nth-of-type(1) {height: 100px;background: black;}

не выбирает div test3, потому что это не первый div в контейнере

В этом случае nth-of-type работает так же, как nth-child ?

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

В общем, это может помочь думать о псевдоклассах как о фильтре , который соответствует только подмножеству соответствующего селектора (т. Е. Части селектора перед двоеточием), когда он находится в состоянии , описываемом псевдоклассом.

Так, например, .test:hover означает: выберите все элементы с тестом класса, но только те, которые находятся в состоянии зависания.

Аналогично здесь с nth-of-type: .test3:nth-of-type(3) означает:

Выберите все элементы с классом test3, но только если это 3-й элемент такого типа в контейнере.

Поэтому возьмите следующую демонстрацию:

.test:nth-of-type(3) {
  color:red;
}
<div>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
  </ul>
  <span>span 1</span>
  <span>span 2</span>
  <span>span 3</span>
  <span>span 4</span>
  <span>span 5</span>
</div>

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

NB:

При использовании псевдокласса nth-of-type без ограничения его селектором типов — все типы будут совпадать — как если бы использовался универсальный селектор.

Так, например:

.test:nth-of-type(3) is equivalent to *.test:nth-of-type(3)

Демонстрация:

.test:nth-of-type(3) {
  color:red;
}
<div>
  <fred>fred 1</fred>
  <div>div 1</div>
  <span>span 1</span>
  <p>p 1</p>
  <p>p 2</p>
  <p>p 3</p>
  <p>p 4</p>
  <span>span 2</span>
  <fred>fred 2</fred>
  <fred>fred 3</fred>
  <span>span 3</span>
</div>

Поделиться Danield     25 апреля 2017 в 07:53


1

Вы используете .test3 в своих селекторах, но класс .test3 встречается только один раз в вашем markup. Таким образом, других элементов .test3 нет .

Вы можете использовать .test > div для доступа к вашим прямым дочерним дивам.

Кроме того, шаблон для nth-of-type равен :nth-of-type( <an-plus-b> ) . Так что вы можете просто использовать

.test > div:nth-of-type(2n+1) { ... } /* or */
.test > div:nth-of-type(odd) { ... }

чтобы получить первый и третий (каждый нечетный) элемент.

.test>div {
  margin: 10px;
  padding: 10px;
}

.test > div:nth-of-type(2n+1) {
  height: 100px;
  background: black;
  color: white;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Вы также можете просто получить доступ к одному ребенку, который вам нужен, с .test > div:nth-of-type(1) :

.test>div {
  margin: 10px;
  padding: 10px;
}

.test > div:nth-of-type(1) {
  height: 100px;
  background: black;
  color: white;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

См .Дополнительную информацию о nth-of-type на MDN.

Поделиться andreas     25 апреля 2017 в 07:33


1

.test3:nth-of-type(1) {height: 100px;background: black;}

не работает, потому что тип ссылается на div, и поскольку у вас нет первого дочернего элемента как div с классом test3 , css не применяется к нему.

Если бы ваш markup был написан, как в приведенном ниже примере, этот селектор работал бы, но селектор

.test3:nth-of-type(3) {height: 100px;background: black;}

не будет, потому что нет 3-го элемента типа div и класса test3

Возможно, вы поймете важность слова типа в этом селекторе, добавив некоторые элементы другого типа перед первым div, как в примере ниже

.test3:nth-of-type(1) {height: 100px;background: black; color: #fff;}
        <div>
         <p>1st eleement of paragraph type</p>
         <div>1st element of div type</div>
         <div>2nd element of div type</div>
         <div>3rd element of div type</div>
        </div>

Поделиться BozanicJosip     25 апреля 2017 в 07:56

  • jQuery: .toggle nth-of-type с щелчком nth-of-type?

    Я пытаюсь построить очень простой мобильный сайт, где окно контента включается нажатием соответствующей кнопки и выключается нажатием любой из других кнопок. Этот код работает для переключения каждого окна содержимого одновременно, даже если я думаю, что мне нужен только тот, который связан с…

  • jQuery nth-child nth-of-type не работает

    Мне нужно вставить clearfix div после x количества элементов, чтобы я мог получить красиво отформатированные столбцы. Я пробовал и :nth-child , и :nth-of-type , и я получаю только один div, добавленный после первых X элементов. $(‘#content .product-layout:nth-child(3)’).after(‘<div…

Похожие вопросы:


CSS nth-of-type не работает

Использование селектора nth-of-type в CSS не работает для меня. Он применяет стиль первого ребенка к rest своих братьев и сестер. Итак, что происходит, так это то, что все дивы home-navigation-item…


:nth-of-type(n) работает не так, как ожидалось

При использовании :nth-of-type(n) для выбора он не возвращает ожидаемого ответа. Я хочу выбрать второй элемент <td> с className b . Почему при использовании селектора .b:nth-of-type(2) не…


:nth-child и :nth-of-type не работает

У меня есть 3 кнопки, и для второй кнопки я пытаюсь добавить к ней дополнительное поле, но по какой-то причине nth-child и nth-of-type вообще не меняют внешний вид. Я думаю, что просто не понимаю,…


CSS nth-of-type работает не так, как ожидалось

Что я упускаю из функциональности селектора nth-of-type CSS3? Пожалуйста, посмотрите этот код http://codepen.io/tuleby/pen/oqKAG Желаемый результат — три четных ряда с 6 дивами на каждом, и таким…


nth-of-type ведет себя не так, как ожидалось

HTML <div id=content> <div id=ok class=content-block warning><div></div><span>&#10003 Everything is OK!</span> </div> <div id=module_1…


jQuery: .toggle nth-of-type с щелчком nth-of-type?

Я пытаюсь построить очень простой мобильный сайт, где окно контента включается нажатием соответствующей кнопки и выключается нажатием любой из других кнопок. Этот код работает для переключения…


jQuery nth-child nth-of-type не работает

Мне нужно вставить clearfix div после x количества элементов, чтобы я мог получить красиво отформатированные столбцы. Я пробовал и :nth-child , и :nth-of-type , и я получаю только один div,…


nth-of-type не работает в IE 9

Я не могу заставить nth-of-type работать в IE 9 -> в настоящее время мой код ccs работает на IE 8. Может ли кто — нибудь предложить обходной путь? На рабочем столе я хочу 4 cols и мобильный телефон…


nth-of-type (нечетно) не работает SCSS

ОТРЕДАКТИРОВАННЫЙ https://jsfiddle.net/joLav03L/14 / td.number:nth-of-type(odd) { background-color: blue; } Почему он не работает в SCSS? Здесь все работало отлично: &:nth-of-type(odd) {…


Nth-of-type не извлекая ожидаемый элемент

Я столкнулся с проблемой, используя nth-of-type. У меня есть кодовая панель, демонстрирующая эту проблему. https://codepen.io/nicole-staline/pen/bJMMjd Я бы предположил, что, поскольку…

Псевдокласс :nth-of-type() | CSS справочник

CSS селекторы

Значение и применение

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

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

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

CSS синтаксис:

:nth-of-type(номер | ключевое слово | формула) {
блок объявлений;
}

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

  • even (четные элементы)
  • odd (нечетные элементы)

Кроме того псевдокласс :nth-of-type(), как и :nth-child в качестве значения может использовать простую математическую формулу:

p:nth-of-type(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная со второго внутри родительского элемента будет стилизована:

  • 4n – каждый четвертый элемент определенного типа.
  • 2 – с какого элемента начинать.

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

p:nth-of-type(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

  • 4n – каждый четвертый элемент определенного типа.
  • -1 – с какого элемента начинать.

Версия CSS

CSS3

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

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :nth-of-type</title>
<style>
.test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

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

Результат нашего примера:

Пример использования псевдокласса :nth-of-type.

Рассмотрим пример в котором с использованием псевдокласса :nth-of-type мы будем чередовать изображения слева и справа документа:

<html>
<head>
	<meta charset = "UTF-8">
	<title>Чередование изображений с использованием псевдокласса :nth-of-type</title>
<style>
img { 
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
margin: 5px; /* внешние отступы со всех сторон */
}
img:nth-of-type(2n+1) { /* для данной задачи вместо формулы подойдут и значения ключевых слов even и odd (четные и нечетные дочерние элементы) */
float: left; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по левому краю */
border: 2px solid orange; /* устанавливаем сплошнаю границу размером 2 пикселя оранжевого цвета */
} 
img:nth-of-type(2n) { 
float: right; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по правому краю */
border: 2px solid gray; /* устанавливаем сплошнаю границу размером 2 пикселя серого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат примера:

Пример чередования изображений с использованием псевдокласса :nth-of-type

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

CSS селекторы

CSS — :nth-of-type() — :nth-of-type() CSS псевдо-класс соответствует элементов данного типа (имя тега),

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

p:nth-of-type(4n) {
  color: lime;
}

Syntax

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

Смотрите :nth-child для более подробного объяснения его синтаксиса.

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

:nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd

Examples

Основной пример

HTML
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
CSS
p:nth-of-type(2n+1) {
  color: red;
}


p:nth-of-type(2n) {
  color: blue;
}


p:nth-of-type(1) {
  font-weight: bold;
}


p.fancy:nth-of-type(2n+1) {
  text-decoration: underline;
}
Result
Note

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

Specifications

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
:nth-of-type

1

12

До Edge 16 Microsoft Edge рассматривал все неизвестные элементы (например,пользовательские элементы)как элементы одного типа.

3.5

9

Internet Explorer рассматривает все неизвестные элементы (например,пользовательские элементы)как элементы одного типа.

9.5

3.1

2

18

4

10.1

3.1

1.0

См.также

Css. Разница между :nth-child и :nth-of-type (:last-child и :last-of-type)

Использование псевдоклассов в css очень удобно. Применение, в частности, :nth-child, :nth-of-type, :last-child,:last-of-type позволяют сделать разметку более гибкой и легкой, зачастую позволяя избежать использования лишних классов.

Но часто бывает не понятна разница между интуитивно схожими формулировками, например, last-child и last-of-type.

Давайте разберем на примере :nth-child и :nth-of-type.

К примеру есть вот такая разметка:

<div> <p>Привет</p> <p>Пользователь</p> <!— Нужно получить этот элемент —> </div>

<div>

   <p>Привет</p>

   <p>Пользователь</p>    <!— Нужно получить этот элемент —>

</div>

Чтобы выделить цветом нужный нам элемент подойдут ОБА следующих правила:

p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; }

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Оба правила получают доступ к второму элементу.

Разницу между элементами мы сможем ощутить, разобрав следующий вариант — например, у нас изменилась структура страницы.

<div> <h2>Кабинет</h2> <p>Привет</p> <p>Пользователь</p> <!— Нужно, по прежнему, получить этот элемент —> </div>

<div>

   <h2>Кабинет</h2>

   <p>Привет</p>

   <p>Пользователь</p>    <!— Нужно, по прежнему, получить этот элемент —>

</div>

Если к новой верстке применить это правило:

p:nth-child(2) { color: red; }

p:nth-child(2) { color: red; }

.. в результате подсветится слово Привет. Почему?
Потому что:
— это второй элемент в родительском элементе
— это действитель параграф.

Второе же правило:

p:nth-of-type(2) { color: red; }

p:nth-of-type(2) { color: red; }

.. будет работать по-прежнему верно.

Причина этому — то, что nth-of-type ищет именно второй параграф, а не любой второй элемент, после этого проверяя, является он параграфом или нет

Тема простая, но не очень легко понимаемая с первого раза. Надеюсь объяснил все понятно. 🙂

Похожие записи


CSS: селектор nth-of-type ()


Пример

Укажите цвет фона для каждого элемента

, который является вторым элементом p. своего родителя:

p: n-й тип (2) {
фон красный;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

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

n может быть числом, ключевым словом или формулой.

Совет: Посмотрите на селектор: nth-child () для выбора элемента, который является n -м потомком, независимо от тип своего родителя.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.

Селектор
: nth-of-type () 4.0 9,0 3,5 3,2 9,6

Синтаксис CSS

: nth-of-type ( номер ) {
объявления css ;
} Демо

Другие примеры

Пример

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

Здесь мы указываем два разных цвета фона для четных и нечетных элементов p:

p: n-й тип (нечетный) {
фон: красный;
}

p: nth-of-type (четное) {
фон синий;
}

Попробуй сам »

Пример

По формуле ( и + b ).Описание: a представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.

Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:

p: n-й тип (3n + 0) {
фон красный;
}

Попробуй сам »

: nth-of-type | CSS-уловки

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

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

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

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

  li {
  фон: slategrey;
}
/ * выбираем чередующиеся элементы, начиная со второго * /
li: nth-of-type (2n) {
  фон: lightslategrey;
}

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

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

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

Для дальнейшей иллюстрации, вот несколько примеров действительных селекторов : nth-of-type :

  Оцените эту ручку!

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

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

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

Сопутствующие объекты

Прочие ресурсы

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

Хром Safari Firefox Opera IE Android iOS
Завод 3.2+ Работает 9,5+ 9+ Работает Работает

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

Разница между: nth-child и: nth-of-type

Предположим, этот HTML:

  <раздел>
   
 Маленький 

   
 Хрюша

Они будут делать то же самое:

  p: nth-child (2) {цвет: красный; }  
  p: nth-of-type (2) {цвет: красный; }

Разница, конечно, есть.

Наш селектор : nth-child на «простом английском» означает выбор элемента , если :

  1. Это элемент абзаца
  2. Это второй ребенок одного из родителей

Наш селектор : nth-of-type , на простом английском языке означает:

  1. Выберите дочерний элемент второго абзаца для родительского элемента

: nth-of-type — это… как можно лучше выразиться… без условного обозначения .

Допустим, наша разметка изменилась на:

  <раздел>
    
 Слова 
 
   
 Маленький 

   
 Хрюша

Это перерывы:

  p: nth-child (2) {цвет: красный; } / * Теперь неверно * /

Это все еще работает:

  p: nth-of-type (2) {цвет: красный; } / * Все еще работает * /

Под «разрывами» я подразумеваю, что приведенный выше селектор : nth-child теперь выбирает слово «Little» вместо «Piggy», потому что этот элемент выполняет и 1) это второй дочерний элемент, и 2) элемент абзаца.Под словом «все еще работает» я имею в виду, что «Копилка» все еще выбирается, потому что это второй абзац под родительским элементом.

Если бы мы добавили

после этого

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

Мне кажется, что : nth-of-type менее хрупок и более полезен в целом, несмотря на то, что : nth-child более распространен (в моих глазах).Как часто вы думаете: «Я хочу выбрать второго потомка родителя, если это просто абзац»? Возможно, иногда, но более вероятно, что вы захотите «выбрать второй абзац» или «выбрать каждую третью строку таблицы», что в тех случаях, когда : nth-of-type является (опять же, в моих глазах) более сильным выбором.

Я нахожу большую часть моего «дерьмо, почему не работает селектор this: nth-child ?!» моментов вызваны тем, что оказалось, что я квалифицировал селектор с помощью тега, и этот дочерний номер на самом деле не является этим тегом.Поэтому при использовании : nth-child я считаю, что обычно лучше указать родителя и оставить : nth-child без тега.

  dl: nth-child (2) {} / * лучше, чем * /
dd: nth-child (2) {} / * this * /

Но, конечно, все зависит от конкретной ситуации.

Браузерная поддержка : nth-of-type довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.

Я бы сказал, что если вам нужна более глубокая поддержка, jQuery будет вам спиной (используйте там селектор, примените класс и стиль с этим классом), но на самом деле jQuery отказался от поддержки: nth-of-type.Мне это кажется странным. Я слышал, что это из-за низкого использования. Если вы хотите пойти по этому пути, вот плагин, чтобы вернуть их. jQuery 1.9 теперь снова поддерживает: nth-of-type (обратно в IE 6), так что это вариант.

По теме: не забывайте об удивительных родственниках : first-of-type , : last-of-type , : nth-last-of-type и : only-of-type . Узнайте больше здесь.

Если вы хотите поиграть с наглядным примером, попробуйте этот инструмент!

javascript — nth-of-type внутри div не работает

Я сделаю снимок, не увидев HTML.

Основная проблема (вероятно) в том, что nth-of-type () работает не так, как вы думаете. Элементы, использующие nth-of-type () , должны быть родственниками . Если целевой элемент вложен в другие элементы, это не сработает.

Я предполагаю, что ваша разметка примерно такая:

  

  

     
 Заголовок 
 
  

  

     
 Заголовок

Если это так, # user-attributes h6: nth-of-type (2) не будет соответствовать второму

, потому что это первый типа в # user-attributes> div> h6 .Вышеупомянутые
не являются братьями и сестрами (но их родительский
).

  # атрибуты пользователя h6: nth-of-type (2) {
  красный цвет;
}  
  

  

     
 Заголовок 
 
  

  

     
 Заголовок

Но следующая разметка будет:

  

  

     
 Заголовок 
 
     
 Заголовок 
 
  

  

     
 Заголовок 
 
  



  
  # атрибуты пользователя h6: nth-of-type (2) {
  красный цвет;
}  
  

  

     
 Заголовок 
 
     
 Заголовок 
 
  

  

     
 Заголовок

Если ваша разметка похожа на эту, вам придется переместиться вверх по дереву документа и, возможно, использовать другой селектор.

  # атрибуты пользователя> div: nth-of-type (2) h6 {
  красный цвет;
}  
  

  

     
 Заголовок 
 
  

  

     
 Заголовок

Как видите, в следующем примере могут возникнуть сложности:

  # атрибуты пользователя> div: nth-of-type (2) h6 {
  красный цвет;
}  
  

  

     
 Заголовок 
 
     
 Заголовок (Почему я не красный?) 
 
  

  

     
 Заголовок

На этом этапе вы, вероятно, захотите перейти к добавлению класса к конкретному

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

html — nth-of-type не работает должным образом

Псевдоселектор n-го типа определенно работает здесь, как и ожидалось.

от MDN:

Псевдокласс CSS: nth-of-type (an + b) соответствует элементу, имеющему an + b-1 братья и сестры с тем же именем элемента перед ним в документе дерево

Так

 .test3: nth-of-type (3) {height: 100px; background: black;}

‘работает’, потому что div с классом test3 также является третьим div в контейнере (div с классом test)

однако

  .test3: nth-of-type (1) {height: 100px; background: black;}

не выбирает div test3, потому что это не первый div в контейнере

Будет ли nth-of-type работать так же, как nth-of-type в этом случае?

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

В общем, можно было бы подумать о псевдоклассах как о фильтре , который соответствует только подмножеству согласованного селектора (т.е. части селектора перед двоеточием), когда он находится в состоянии , что псевдокласс описывает.

Так, например, .test: hover означает: выбрать все элементы с помощью class test — но только те, которые зависают.

Аналогично здесь с nth-of-type: .test3: nth-of-type (3) означает:

Выберите все элементы с классом test3, но только если это третий элемент такого типа в своем контейнере.

Итак, возьмем следующую демонстрацию:

  .test: nth-of-type (3) {
  красный цвет;
}  
  

  
    
    
  •  li 1 
    • 
    
  •  li 2 
    • 
    
  •  li 3 
    • 
    
  •  li 4 
    • 
    
  •  li 5 
    • 
  

   диапазон 1 
   промежуток 2 
   промежуток 3 
   диапазон 4 
   диапазон 5

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

NB:

При использовании псевдокласса nth-of-type без ограничения с помощью селектора типа — все типы будут соответствовать — как если бы использовался универсальный селектор.

Так например:

.test: nth-of-type (3) эквивалентно * .test: nth-of-type (3)

Демо:

  .test: nth-of-type (3) {
  красный цвет;
}  
  

   Фред 1 
  
 div 1 

   диапазон 1 
  
 стр. 1 

  
 стр. 2 

  
 стр. 3 

  
 стр. 4 

   промежуток 2 
   Фред 2 
   фред 3 
   промежуток 3

CSS | Селектор: nth-of-type () — GeeksforGeeks

: nth-of-type () в css Selector используется для стилизации только тех элементов, которые являются n-м номером дочернего элемента его родительского элемента.N может быть числом, ключевым словом или формулой.

Синтаксис: 

: nth-of-type (число) {
  // Свойство CSS;
}

Где число — аргумент, представляющий шаблон для сопоставления элементов. Он может быть нечетным, четным или в функциональном обозначении.

  • odd: Представляет элементы, положение которых нечетное в серии: 1, 3, 5 и т. Д., Считая с конца.
  • четный: Он представляет элементы, положение которых четное в ряду: 2, 4, 6 и т. Д., считая с конца.
  • функциональная нотация (): Представляет элементы, положение братьев и сестер которых соответствует шаблону An + B, для каждого положительного целого или нулевого значения n. Индекс первого элемента, считая с конца, равен 1.

Пример-1:

7>

< центр >

< h2 > GeeksForGeeks h2 >

< h3 >: nth -type () Селектор h3 >

< p класс = "geeksFORGEEKS" > geeksforgeeks div >

< p class = "forgeeks" > Портал информатики для г вундеркинды. div >

< p class = "geeks" > Размещение Судо. p >

< p class = "SUDO" > СТЕНДЫ GFG ДЛЯ GEEKSFORGEEKS. p >

кузов >

html >

< html >

< головка >

< стиль >

h2 {

цвет: зеленый;

размер шрифта: 35 пикселей;

}

p: nth-of-type (2) {

фон: зеленый;

цвет: белый;

начертание шрифта: полужирный;

ширина: 70%;

}

стиль >

головка >

< корпус

Вывод:



    Пример 2: В этом примере каждый нечетный и четный элемент выбирается с помощью нечетного или даже ключевое слово в качестве аргумента.

    7>

    < центр >

    < h2 > GeeksForGeeks h2 >

    < h3 >: nth -type () Селектор h3 >

    < p класс = "geeksFORGEEKS" > geeksforgeeks div >

    < p class = "forgeeks" > Портал информатики для г вундеркинды. div >

    < p class = "geeks" > Размещение Судо. p >

    < p class = "SUDO" > СТЕНДЫ GFG ДЛЯ GEEKSFORGEEKS. p >

    кузов >

    html >

    < html >

    < головка >

    >

    17 17 >

    h2 {

    цвет: зеленый;

    размер шрифта: 35 пикселей;

    }

    p: nth-of-type (нечетный) {

    фон: зеленый;

    цвет: белый;

    начертание шрифта: полужирный;

    ширина: 70%;

    }

    p: nth-of-type (четный) {

    фон: красный;

    цвет: белый;

    начертание шрифта: полужирный;

    ширина: 70%;

    }

    стиль >

    головка >

    < корпус

    вывод:

    Поддерживаемые браузеры: Браузеры, поддерживаемые : nth-of-type () Selector, перечислены ниже:

    • Apple Safari
    • Google Chrome
    • Firefox
    • Opera
    • Internet Explorer

: nth-of-type () Селектор | Документация по jQuery API

Описание: Выбирает все элементы, которые являются n-м потомком своего родителя по отношению к одноименным элементам с тем же именем.

Поскольку реализация селекторов : nth- в jQuery строго выведена из спецификации CSS, значение n является «индексированным 1», что означает, что подсчет начинается с 1. Для других выражений селектора, таких как .first ( ) или .eq () jQuery следует подсчету с нулевым индексом в JavaScript.

Дальнейшее обсуждение этого использования можно найти в спецификации W3C CSS.

Пример:

Найдите каждый промежуток, который является вторым по отношению к его соседним промежуткам.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

 
  демонстрация nth-of-type