Псевдокласс :nth-of-type
Псевдокласс :nth-of-type позволяет выбрать один или более элементов по тегу и номеру в дереве элементов
.text p:nth-of-type(odd) {
...
}- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
:nth-of-type(odd)
Выбор всех нечетных абзацев в блоке с классом .text-odd
<style>
.text-odd p:nth-of-type(odd) {
color: red;
}
</style>
<div class="text-odd">
<p>Первый абзац</p>
<h3>Заголовок</h3>
<p>Второй абзац</p>
<p>Третий абзац</p>
<h3>Заголовок</h3>
<p>Четвертый абзац</p>
<p>Пятый абзац</p>
</div>Первый абзац
Заголовок
Второй абзац
Третий абзац
Заголовок
Четвертый абзац
Пятый абзац
:nth-of-type(even)
Выбор всех четных абзацев в блоке с классом .text-even
<style>
.text-even p:nth-of-type(even) {
color: red;
}
</style>
<div class="text-even">
<p>Первый абзац</p>
<h3>Заголовок</h3>
<p>Второй абзац</p>
<p>Третий абзац</p>
<h3>Заголовок</h3>
<p>Четвертый абзац</p>
<p>Пятый абзац</p>
</div>Первый абзац
Заголовок
Второй абзац
Третий абзац
Заголовок
Четвертый абзац
Пятый абзац
:nth-of-type(3)
Выбор элемента по его порядковому номеру и типу относительно своего родителя
<style>
.text-num p:nth-of-type(3) {
color: red;
}
</style>
<div class="text-num">
<p>Первый абзац</p>
<h3>Заголовок</h3>
<p>Второй абзац</p>
<p>Третий абзац</p>
<h3>Заголовок</h3>
<p>Четвертый абзац</p>
<p>Пятый абзац</p>
</div>Первый абзац
Заголовок
Второй абзац
Третий абзац
Заголовок
Четвертый абзац
Пятый абзац
:nth-of-type(2n+2)
Выбор элементов используя математическое выражение an+b, где a - множитель счетчика, n - счетчик, b - изменение начала работы счетчика.
В примере :nth-of-type(2n+2), отсчет начнется со второго дочернего элемента, потому что b = 2, и дальше будет стилизоваться каждый второй элемент начиная со второго, так как an = 2n.
<style>
.text-count p:nth-of-type(2n+2) {
color: red;
}
</style>
<div class="text-count">
<p>Первый абзац</p>
<h3>Заголовок</h3>
<p>Второй абзац</p>
<p>Третий абзац</p>
<h3>Заголовок</h3>
<p>Четвертый абзац</p>
<p>Пятый абзац</p>
</div>Первый абзац
Заголовок
Второй абзац
Третий абзац
Заголовок
Четвертый абзац
Пятый абзац