Псевдоклас :first-of-type вибирає перший елемент певного типу в групі братських елементів, іншими словами, що мають одного з батьків.
:first-of-type зручно використовувати, коли всередині батька зустрічаються різні елементи, на зразок <p> або <div>. Запис div:first-of-type читається зліва направо — спочатку вибираються всі елементи <div> в одного з батьків, потім у тому числі визначається перший елемент. У прикладі 1 :first-of-type додається до різних селекторів і задає колір тексту.
Приклад 1. Використання :first-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-of-type</title> <style> div:first-of-type { color: blue; }
p:first-of-type { color: green; }
</style>
</head>
<body> <section> <div>Uno</div> <p>Один</p> <div>Dos</div> <p>Два</p> <div>Tres</div> <p>Три</p>
</section>
</body>
</html>Результат цього прикладу показаний на рис. 1. Текст першого <div> задається синім кольором, а текст першого <p> зеленим кольором.
Мал. 1. Колір перших елементів
:first-of-type та :first-child вибирають перший елемент у групі, але роблять це абсолютно по-різному.
- :first-child вибирає тільки перший елемент, при цьому який саме цей елемент не розглядається. Селектор section :first-child вибере перший елемент усередині <section> з прикладу 1 — це <div>Uno</div>.
- :first-of-type вибирає перший елемент кожного типу. У прикладі 1 всередині <section> зустрічаються елементи <div> та < p>. Селектор section :first-of-type вибере перший елемент <div> і перший елемент <p> — це <div>Uno</div> та <p>Один</p>.
- Запис p:first-child читається справа наліво: спочатку знаходиться перший елемент, потім перевіряється що це елемент <p> ;. Буде вибрано лише перший елемент і лише якщо це <p>. Таким чином, селектор p:first-child у прикладі 1 нічого не вибере, оскільки першим елементом у нас йде <div>, а не <p>.
- Запис p:first-of-type читається зліва направо: спочатку знаходяться всі елементи <p> і серед них вибирається перший елемент. Так що селектор p:first-of-type вибере <p>Один</p>, незважаючи на те, що формально <p> всередині <section> йде другим.
Виходячи з цього :first-of-type зазвичай застосовується, коли комбінуються різні елементи, тоді як :first-child використовується для однотипних елементів , як <li>, <td>, <tr> та ін.
У прикладі 2 :first-of-type додається до <p>, щоб змінити стиль першого абзацу всередині <article>.
Приклад 2. Використання :first-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-of-type</title> <style> article p:first-of-type { color: green; /* Колір тексту */
font-size: 1.2em; /* Розмір тексту */
}
</style>
</head>
<body> <article> <h2>Тангенційний вихор</h2> <p>Безпосередньо із законів збереження випливає, що випромінювання катастрофічно стабілізує кристал.</p> <p>Якщо попередньо піддати об'єкти тривалому вакуумуванню, плазмове утворення відновлює магніт.</p>
</article>
</body>
</html>Псевдоклас :last-of-type працює подібним чином, але вибирає останній елемент певного типу у групі своїх побратимів. У прикладі 3 до останнього абзацу через псевдоелемент ::after додається червоний квадрат.
Приклад 3. Використання :last-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:last-of-type</title> <style> p:last-of-type::after { content: '■'; color: red; padding-left: 0.5em; }
</style>
</head>
<body> <article> <h2>Тангенційний вихор</h2> <p>Безпосередньо із законів збереження випливає, що випромінювання катастрофічно стабілізує кристал.</p> <p>Якщо попередньо піддати об'єкти тривалому вакуумуванню, плазмове утворення відновлює магніт.</p>
</article>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Використання :last-of-type для абзацу