Кратко
Секция статьи "Кратко"Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:
— первый;: first - of - type
— каждый n-й элемент;: nth - of - type ( n - число )
— последний;: last - of - type
— каждый n-й элемент с отсчётом «с конца».: nth - last - of - type ( n - число )
Пример
Секция статьи "Пример"Допустим, мы имеем такую HTML-разметку:
<ol class="list"> <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li> <li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li> <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li> <li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li> <li class="list__item">Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li> <li class="list__item">Розы красят в синий цвет при помощи пищевых красителей.</li> <li class="list__item">Чёрный на чёрном не виден.</li></ol>
<ol class="list"> <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li> <li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li> <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li> <li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li> <li class="list__item">Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li> <li class="list__item">Розы красят в синий цвет при помощи пищевых красителей.</li> <li class="list__item">Чёрный на чёрном не виден.</li> </ol>
И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.
Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li>
по порядку:
li:nth-of-type(3) { color: #49A16C;}
li:nth-of-type(3) { color: #49A16C; }
2-й, 4-й, 6-й пункты с классом
имеют синий цвет, т. е. каждый чётный:
.list__item:nth-of-type(2n) { color: #1A5AD7;}
.list__item:nth-of-type(2n) { color: #1A5AD7; }
Нечётные элементы записываются как
.
5-й <li>
(или 3-й
) — жёлтый:
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: #18191C;}
li:nth-last-of-type(1), .list__item:last-of-type { color: #18191C; }
Если нам нужно выбрать единственный элемент своего родителя, используется псевдокласс
(что эквивалентно комбинации
):
Как пишется
Секция статьи "Как пишется"💡 Как и у всех псевдоклассов, слева от
-разделителя можно указать дополнительный селектор, к которому нужно применить правило. Если его не указать, правило будет применено для каждого подходящего элемента.
Для порядковых псевдоклассов (
и
) для обозначения кратности (каждый 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
:
p:nth-of-type(even) { /* Стили */}
p:nth-of-type(even) { /* Стили */ }
Выберет все нечётные элементы — то же самое, что p
:
p:nth-of-type(odd) { /* Стили */}
p:nth-of-type(odd) { /* Стили */ }
Аргументы
Секция статьи "Аргументы"Для числовых псевдоклассов (
и
) обязательно наличие n-числа в аргументах.
Подсказки
Секция статьи "Подсказки"💡 Выбор первого (
) или последнего (
) элемента «грамматически» эквивалентен числовому формату —
для первого элемента и
для последнего соответственно, но не требует указания числа-аргумента.
💡 Если нужно выбрать такой элемент, который внутри своего родителя только в единственном экземпляре, используйте
.
На практике
Секция статьи "На практике"🛠 Эти псевдоклассы используются реже, чем Псевдоклассы группы child, но иногда нужно выбрать именно из списка однотипных элементов, а не из всех детей своего родителя.