Псевдоклас :nth-of-type() працює схожим чином з :nth-child(), але вибирає елементи, виходячи з їхнього положення в групі братських елементів, лише зазначеного типу.
Якщо братські елементи відносяться до одного типу (< ;li>, як показано нижче), :nth-child() і :nth-of-type() покажуть однаковий результат.
<code data-language="html"><ul> <li>Один</li> <li>Два</li> <li>Три</li> </ul>
Для наведеного списку li:nth-child(odd) та li: nth-of-type(odd) однаково виберуть усі непарні пункти (перший та третій).
У ситуації, коли всередині одного з батьків комбінуються різні елементи, псевдокласи :nth-of-type() та :nth-child() працюють по-своєму. Як приклад візьмемо наступний фрагмент HTML.
<code data-language="html"><section> <h2>Перший заголовок</h2> <p>Перший абзац</p> <h2>Другий заголовок</h2> <p>Другий абзац</p> <p>Третій абзац</p> </section>
І розглянемо деякі варіанти CSS.
section :nth-child(2) { color: green; }Використання :nth-child(2) без вказівки селектора вибере другий елемент будь-якого типу (< ;p>Перший абзац</p>) і встановить для нього зелений колір тексту.
section :nth-of-type(2) { color: green; }Використання :nth-of-type(2) без вказівки селектора вибере другий елемент кожного типу. Всередині <section> зустрічаються елементи <h2> та <p>, тому будуть вибрані рядки <h2>Другий заголовок</h2> та <p>Другий абзац</p>.
section p:nth-child(2) { color: green; }Додавання селектора p до :nth-child(2) вводить додаткове обмеження ;-спочатку береться другий елемент, потім виглядає, чи є цей елемент абзацом. Тільки при збігу цих двох умов (другим елементом йде саме <p>) елемент буде вибраний. В даному випадку зеленим кольором фарбується рядок <p>Перший абзац</p>.
section p: nth-of-type(2) { color: green; }Інакше працює додавання селектора p до :nth-of-type(2). Спочатку беруться всі елементи <p> і серед них вибирається другий. У цьому наявність інших елементів та його порядок розрахунок не принимается. В результаті буде вибрано рядок <p>Другий абзац</p>.
section p:nth-child(odd) {color: green; }Вибрані всі непарні елементи, і лише <p>. Якщо спочатку зробити вибірку всіх непарних елементів (перший, третій і п'ятий), то залишиться таке.
<code data-language="html"><h2>Перший заголовок< /h2> <h2>Другий заголовок</h2> <p>Третій абзац</p>
З них абзацом є лише третій рядок, він і буде обраний. У результаті зеленим кольором виділиться <p>Третій абзац</p>.
section p:nth-of-type(odd) { color: green; }p:nth-of-type() спочатку залишає лише абзаци.
<code data-language="html"><p>Перший абзац</p> <p>Другий абзац</p> <p>Третій абзац</p>
Потім з отриманого проміжного результату вибираються непарні елементи (перший та третій). Так що зеленим кольором виділятимуться рядки <p>Перший абзац</p> та <p>Третій абзац</p>.
Таким чином, :nth-child() використовується для вибору однотипних братських елементів (<li>, <td>, <tr> та ін.), а :nth-of-type() для вибору братських елементів певного типу (на зразок <p>, <div> та ін), коли вони зустрічаються спільно. Втім, на практиці, розробники віддають перевагу одному псевдокласу і частіше використовують саме його.
У прикладі 1 парні картинки (елементи <img>) притискаються до правого краю через властивість float зі значенням right, а непарні картинки притискаються до лівого краю знову ж таки через властивість float, але вже зі значенням left. Вибір парних та непарних елементів <img> відбувається за допомогою псевдокласу :nth-of-type з параметрами even та odd.
Приклад 1. Використання :nth-of-type()
><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-of-type()</title> <style> img:nth-of-type(odd) { float: left; /* Притискаємо до лівого краю */
margin: 0 1em 1em 0; /* Відступ праворуч і знизу */
}
img:nth-of-type(even) { float: right; /* Притискаємо до правого краю */
margin: 0 0 1em 1em; /* Відступ знизу та зліва */
}
</style>
</head>
<body> <h1>Фотографії старого Києва</h1> <img src="image/thumb1.jpg" alt=""> <p>Софійський собор</p> <img src="image/thumb2.jpg" alt=""> <p>Польський костел</p> <img src="image/thumb3.jpg" alt=""> <p>Купецький клуб</p> <img src="image/thumb4.jpg" alt=""> <p>Пам'ятник Св. Володимиру</p>
</body>
</html>