Nth of type css: :nth-of-type() — CSS: Cascading Style Sheets - Блог сумасшедшего сисадмина

:nth-of-type() | WebReference

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

Если братские элементы относятся к одному типу (<li>, как показано ниже), то :nth-child() и :nth-of-type() покажут одинаковый результат.

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>

Для приведённого списка li:nth-child(odd) и li:nth-of-type(odd) одинаково выберут все нечётные пункты (первый и третий).

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

<section>
  <h3>Первый заголовок</h3>
  <p>Первый абзац</p>
  <h3>Второй заголовок</h3>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</section>

И рассмотрим некоторые варианты CSS.

section :nth-child(2) { color: green; }

Использование :nth-child(2) без указания селектора выберет второй элемент любого типа (<p>Первый абзац</p>) и установит для него зелёный цвет текста.

section :nth-of-type(2) { color: green; }

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

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

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

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

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

section p:nth-child(odd) { color: green; }

Будут выбраны все нечётные элементы, и только <p>. Если сперва сделать выборку всех нечётных элементов (первый, третий и пятый), то останется следующее.

<h3>Первый заголовок</h3>
<h3>Второй заголовок</h3>
<p>Третий абзац</p>

Из них абзацем является только третья строка, она и будет выбрана. В итоге зелёным цветом выделится <p>Третий абзац</p>.

section p:nth-of-type(odd) { color: green; }

p:nth-of-type() сперва оставляет только абзацы.

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

Затем из полученного промежуточного результата выбираются нечётные элементы (первый и третий). Так что зелёным цветом выделятся строки <p>Первый абзац</p> и <p>Третий абзац</p>.

Таким образом, :nth-child() используется для выбора однотипных братских элементов (<li>, <td>, <tr> и др.), а :nth-of-type() для выбора братских элементов определённого типа (вроде <p>, <div> и др.), когда они встречаются совместно. Впрочем, на практике, разработчики отдают предпочтение какому-то одному псевдоклассу и чаще используют именно его.

В примере 1 чётные картинки (элементы <img>) прижимаются к правому краю через свойство float со значением right, а нечётные картинки прижимаются к левому краю опять же через свойство float, но уже со значением left. Выбор чётных и нечётных элементов <img> происходит с помощью псевдокласса :nth-of-type с параметрами even и odd.

Пример 1. Использование :nth-of-type()

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:nth-of-type()</title> <style> img:nth-of-type(odd) { float: left; /* Прижимаем к левому краю */ margin: 0 1em 1em 0; /* Отступ справа и снизу */ } img:nth-of-type(even) { float: right; /* Прижимаем к правому краю */ margin: 0 0 1em 1em; /* Отступ снизу и слева */ } </style> </head> <body> <h2>Фотографии старого Киева</h2> <img src=»image/thumb1.

jpg» alt=»»> <p>Софийский собор</p> <img src=»image/thumb2.jpg» alt=»»> <p>Польский костёл</p> <img src=»image/thumb3.jpg» alt=»»> <p>Купеческий клуб</p> <img src=»image/thumb4.jpg» alt=»»> <p>Памятник Св. Владимиру</p> </body> </html>

Псевдокласс :nth-child
Псевдокласс :nth-last-of-type
Псевдокласс :nth-of-type

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

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

Псевдоклассы группы type — CSS — Дока

Кратко

Скопировано

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

:first-of-type — первый;
:nth-of-type(n-число) — каждый n-й элемент;
:last-of-type — последний;
:nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Пример

Скопировано

Допустим, мы имеем такую HTML-разметку:

<ol>  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>  <li>Амбары красят в красный цвет, потому что красная краска...</li>  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>  <li>Чёрный на чёрном не виден.</li></ol>
           <ol>
  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
  <li>Амбары красят в красный цвет, потому что красная краска...</li>
  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался. </li>
  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>
  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>
  <li>Чёрный на чёрном не виден.</li>
</ol>

И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.

Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку:

li:nth-of-type(3) {  color: #41E847;}
          li:nth-of-type(3) {
  color: #41E847;
}

2-й, 4-й, 6-й пункты с классом .list__item имеют синий цвет, т. е. каждый чётный:

.list__item:nth-of-type(2n) {  color: #2E9AFF;}
           .list__item:nth-of-type(2n) {
  color: #2E9AFF;
}

Нечётные элементы записываются как :nth-of-type(2n+1).

5-й <li> (или 3-й . list__item) — жёлтый:

li:nth-of-type(5),.list__item:nth-of-type(3) {  color: #FFD829;}
          li:nth-of-type(5),
.list__item:nth-of-type(3) {
  color: #FFD829;
}

Последний пункт должен быть белым (укажем это и для тега, и для класса):

li:nth-last-of-type(1),.list__item:last-of-type {  color: #FFFFFF;}
          li:nth-last-of-type(1),
.list__item:last-of-type {
  color: #FFFFFF;
}

Открыть демо в новой вкладке

Если нам нужно выбрать единственный элемент своего родителя, используется псевдокласс :only-of-type (что эквивалентно комбинации :first-of-type:last-of-type):

Открыть демо в новой вкладке

Как пишется

Скопировано

💡 Как и у всех псевдоклассов, слева от :-разделителя можно указать дополнительный селектор, к которому нужно применить правило.

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

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

p:nth-of-type(4n) {  /* Стили */}
           p:nth-of-type(4n) {
  /* Стили */
}

Будет выбран каждый 4-й элемент (если таковой будет в общем родителе на одном уровне вложенности).

Для обозначения чётных или нечётных элементов можно использовать числовое выражение.

Выберет все чётные элементы:

p:nth-of-type(2n) {  /* Стили */}
          p:nth-of-type(2n) {
  /* Стили */
}

Выберет все нечётные элементы:

p:nth-of-type(2n + 1) {  /* Стили */}
          p:nth-of-type(2n + 1) {
  /* Стили */
}

Также для обозначения чётных или нечётных элементов можно использовать именованную форму:

Выберет все чётные элементы — то же самое, что p:nth-of-type(2n):

p:nth-of-type(even) {  /* Стили */}
          p:nth-of-type(even) {
  /* Стили */
}

Выберет все нечётные элементы — то же самое, что p:nth-of-type(2n+1):

p:nth-of-type(odd) {  /* Стили */}
          p:nth-of-type(odd) {
  /* Стили */
}

Аргументы

Скопировано

Для числовых псевдоклассов (:nth-of-type(n) и :nth-last-of-type(n)) обязательно наличие n-числа в аргументах.

Подсказки

Скопировано

💡 Выбор первого (:first-of-type) или последнего (:last-of-type) элемента «грамматически» эквивалентен числовому формату — :nth-of-type(1) для первого элемента и :nth-last-of-type(1) для последнего соответственно, но не требует указания числа-аргумента.

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

На практике

Скопировано

Realetive советует

Скопировано

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

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

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Как использовать селектор :nth-of-type():

/* Выбирает второй элемент родственных элементов div */
div:nth-of-type(2) {
фон: красный;
}

/* Выбирает второй элемент li в списке */
li:nth-of-type(2) {
background: lightgreen;
}

/* Выбор каждый третий элемент среди любой группы братьев и сестер */
:n-й тип(3) {
фон: желтый;
}

Попробуйте сами »

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

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

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

n может быть числом, ключевым словом (четным или нечетным) или формулой (например, и + b ).

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

Версия:	CSS3

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

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

Селектор
:n-й тип()	4,0	9,0	3,5	3,2	9,6

Синтаксис CSS

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

Дополнительные примеры

Пример

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

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

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

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

Попробуйте сами »

Пример

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

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

p:nth-of-type(3n+0) {
background: red;
}

Попробуйте сами »

Пример

Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратное 3. Затем мы вычитаем 1 (выберем второй, пятый, восьмой и т. д.):

p:nth-of-type(3n-1) {
background: red;
}

Попробуйте сами »

❮ Предыдущая Справочник по селекторам CSS Далее ❯

НАБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

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

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Что такое nth-of-type в CSS?

share-outline Курс Javascript — освоение основ

Мринал Бхаттачарья

Бесплатно

star 4.

Зачислено:

21465

900 09 Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

Начать обучение

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

Теперь, чтобы выполнить эту задачу, мы можем добавить два класса «нечетные» и «четные» и закрасить нечетные классы синим цветом. Но может возникнуть ситуация, когда мы хотим последовательно раскрасить 3 элемента в порядке красного, зеленого и синего. Тогда создание трех разных классов для решения проблемы — это не то, что мы бы назвали умным кодированием, верно? Эту проблему можно решить с помощью nth-of-type в CSS.

Определение

:nth-of-type — это селектор, который позволяет нам использовать формулу (или выражение) для выбора одного или нескольких элементов на основе их исходного порядка. Это определяется как «структурный псевдокласс» в спецификации CSS Selectors Level 3. Другими словами, они используются для стилизации только тех элементов, которые являются n-м дочерним элементом родительского элемента. Эти n могут быть числом, ключевым словом или выражением.

Синтаксис

Тип 1:

Тип 2:

:::section {.tip} Примечание: в основном используются ключевые слова «четные» и «нечетные». :::

Тип 3:

Примеры

Теперь давайте рассмотрим несколько примеров, чтобы лучше понять, как работает селектор n-го типа.

Пример 1

Давайте рассмотрим пример, в котором мы окрашиваем нечетные и четные элементы абзаца двумя разными цветами фона.

HTML:

CSS:

Здесь мы использовали синтаксис типа 2 :nth-of-type(keyword) . Все четные элементы p имеют один цвет фона, а нечетные — другой!

Выход:

Пример 2

Возьмем другой пример, где мы будем указывать цвет фона элемента p, индекс которого кратен 3.

HTML:

CSS:

Здесь мы использовали синтаксис типа 3 :nth-of-type(выражение/формула) . Цвет фона элемента p, индекс которого кратен 3, был изменен.

Вывод:

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

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

900 59 Morzilla Firefox

Имя браузера	Первая версия браузера, поддерживающая селектор
Google Chrome	4.0
Microsoft Edge (Chromium)	9.0
3. No related posts. Вперед Джумла сайт: Joomla.ru — Все о Joomla! на русском — просто и понятно Назад Get запрос с параметрами: HTTP-запрос методом GET. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты Блог сумасшедшего сисадмина © 2024. Все права защищены. Карта сайта

Имя браузера

Первая версия браузера, поддерживающая селектор

Google Chrome

4.0

Microsoft Edge (Chromium)

9.0

Nth of type css: :nth-of-type() — CSS: Cascading Style Sheets

:nth-of-type() | WebReference

Псевдоклассы группы type — CSS — Дока

Кратко

Пример

Как пишется

Аргументы

Подсказки

На практике

Realetive советует

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

Пример

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

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

Синтаксис CSS

Дополнительные примеры

Пример

Пример

Пример

НАБОР ЦВЕТА

Лучшие учебники

Основные каталожные номера

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

Что такое nth-of-type в CSS?

Определение

Синтаксис

Примеры

Пример 1

Пример 2

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики