Псевдокласс :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>

Первый абзац

Заголовок

Второй абзац

Третий абзац

Заголовок

Четвертый абзац

Пятый абзац

Читайте также

Обсуждение (0)

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