Spec-Zone.ru › CSS

:nth-of-type()

Псевдокласс :nth-of-type() CSS псевдокласса сопоставляет элементы на основе их позиции среди элементов-потомков одного типа (имени тега).

Попробуйте

Синтаксис

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

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

:nth-of-type(<An+B> | even | odd) {
  /* ... */
}

Примеры

Базовый пример

HTML

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

CSS

/* Odd paragraphs */
p:nth-of-type(2n + 1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

Результат

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

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

Спецификация
Selectors Level 4
# nth-of-type-pseudo

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

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari на IOS Samsung Internet WebView Android
:nth-of-type 1
12До Edge 16 Microsoft Edge обрабатывал все неизвестные элементы (например, пользовательские элементы) как элементы одного типа.
3.5 9.5 3.1 18 4 10.1 2 1.0 2

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API