Псевдоклас :nth-of-type

Оновлено: 17.03.2023

Псевдоклас :nth-of-type

Псевдоклас :nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів.

Синтаксис 

<i>Селектор</i>:nth-of-type(odd | even | <число> | <вираження>) {...}

Значення

odd Усі непарні номери елементів.
even Усі парні номери елементів.
<число> Порядковий номер дочірнього елемента щодо свого батька. Нумерація починається з 1, це буде перший елемент у списку.
<выражение> Задається у вигляді an±b, де a і b - цілі числа, а n - лічильник, який автоматично набуває значення 0, 1, 2...

Якщо a дорівнює нулю, то воно не пишеться і запис скорочується до b. Якщо b дорівнює нулю, то воно також не вказується і вираз записується у формі an. a і b можуть бути від'ємними числами, у цьому разі знак плюс змінюється на мінус, наприклад: 5n-1.

Завдяки використанню від'ємних значень a і b деякі результати можуть також вийти від'ємними або рівними нулю. Однак на елементи впливають тільки позитивні значення через те, що нумерація елементів починається з 1.

У табл. 1 наведено деякі можливі вирази та ключові слова, а також зазначено, які номери елементів будуть задіяні.

Табл. 1. Результат для различных значений псевдокласса
Значення Номера елементів Опис
1 1 Перший елемент, є синонімом псевдокласу :first-of-type.
5 5 П'ятий елемент
2n 2, 4, 6, 8, 10,... Всі парні елементи, аналог значення even.
2n+1 1, 3, 5, 7, 9,… Усі непарні елементи, аналог значення odd.
3n 3, 6, 9, 12, 15,... Кожен третій елемент.
3n+2 2, 5, 8, 11, 14,... Кожен третій елемент, починаючи з другого.
n+4 4, 5, 6, 7, 8,... Усі елементи, крім перших трьох.
-n+3 3, 2, 1 Перші три елементи.
5n-2 3, 8, 13, 18, 23,... -
even 2, 4, 6, 8, 10,... Всі парні елементи.
odd 1, 3, 5, 7, 9,... Всі непарні елементи.

Припустимо комбінувати два псевдокласи :nth-of-type для вибору діапазону елементів. Тут будуть обрані всі елементи з другого по п'ятий.

:nth-of-type(n+2):nth-of-type(-n+5) { … }

Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>nth-of-type</title>
      <base href="https://assets.ithillel.ua/images/wiki/">
   <style>
    img:nth-of-type(2n+1) { float: left; }
    img:nth-of-type(2n) { float: right; }
   </style>
  </head>
  <body>
   <p><img src="gallery/left-knight.gif" alt="">
    <img src="gallery/right-knight.gif" alt=""></p>
    <h1>Historical Tournament</h1>
  </body>
</html>

У цьому прикладі непарні картинки вирівнюються по лівому краю вікна, а парні картинки по правому.

Браузери

:nth-of-type

Переглянути сумісність з Can I use?

:nth-of-type