: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 |
См. также
© 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