Псевдоклас :only-child вибирає дочірній елемент, тільки якщо він є єдиним у свого батька. У прикладі 1 зеленим кольором виділяється текст усередині першого <section>, оскільки він містить лише один елемент <div>. Другий <section> містить уже два елементи (<div> та <p> ;) і :only-child не спрацьовує.
Приклад 1. Використання :only-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:only-child</title> <style> section :only-child { color: green; /* Зелений колір тексту */
}
</style>
</head>
<body> <section> <div>Я завжди Один</div>
</section> <section> <div>Ти не Один</div> <p>Ти не Один</p>
</section>
</body>
</html>Селектор p:only-child знаходить елемент лише при дотриманні двох умов: це єдиний дочірній елемент і це елемент <p>. У прикладі 1 таких комбінацій немає — перший <section> містить єдиний дочірній елемент, але це не <p> ;, а <div>; другий <section> містить два елементи і <p> не єдиний.
Псевдоклас :only-of-type вибирає дочірній елемент певного типу, лише якщо він є єдиним у свого батька. У прикладі 2 зеленим кольором будуть виділені всі <div>, оскільки всередині <section> вони зустрічаються один раз. При цьому наявність інших елементів, на зразок <p>, не враховується.
Приклад 2. Використання :only-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:only-of-type</title> <style> section div:only-of-type { color: green; /* Зелений колір тексту */
}
</style>
</head>
<body> <section> <div>Я завжди Один</div>
</section> <section> <div>Ти не Один</div> <p>Ти не Один</p>
</section>
</body>
</html>Таким чином, p:only-child знаходить тільки єдиний елемент і лише якщо це <p>, а p:only-of-type знаходить елемент <p> і дивиться, чи є <p> єдиним.
:only-child і :only-of-type знаходять застосування під час створення різних меню. На мал. 1 показано спадне меню: при наведенні на пункти меню розкривається підменю з посиланнями. Не всі пункти є розкриваючими і щоб користувач не плутався, до пунктів, що розкриваються, додана стрілочка.
Мал. 1. Спадне меню
Саме меню робиться за допомогою вкладеного списку <ul>, а для відображення та приховування пунктів використовується псевдоклас :hover та властивість display. Псевдоклас :only-child прибирає стрілку для єдиного елементу <a> всередині списку, тобто. для пункту, в якому немає підменю (приклад 3).
Приклад 3. У спадному меню
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Меню</title> <style> .menu, .menu ul { /* Обнулюємо відступи та прибираємо маркери у списків */
list-style: none; margin: 0; padding: 0; }
.menu { font: 0.8rem Arial, sans-serif; /* Параметри шрифту */
}
.menu > li { display: inline-block; /* Вишиковуємо по горизонталі */
position: relative; /* Відносне позиціонування */
}
.menu a { color: #4c4c4c; /* Колір посилань */
display: block; /* Блокові посилання */
padding: 5px 10px; /* Поля */
text-decoration: none; /* Забираємо підкреслення */
}
.menu ul { position: absolute; /* Абсолютне позиціонування */
display: none; /* Ховаємо підменю */
width: 200px; /* Ширина підменю */
}
.menu ul a:hover { background: #f05347; /* Червоний колір тла */
color: #fff; /* Колір тексту */
}
.menu > li:hover > a, .menu li:hover ul { background: #f0f0f0; /* Сірий колір фону */
}
.menu li:hover ul { display: block; /* Показуємо підменю при наведенні */
}
.menu > li > a::after { content: '▼'; /* Додаємо стрілочку */
padding-left: 5px; /* Відстань ліворуч */
}
.menu > li > a:only-child::after { content: ''; /* */
}
</style>
</head>
<body> <ul class="menu"> <li><a href="#">Російська кухня</a> <ul> <li><a href="#">Бефстроганів</a></li> <li><a href="#">Гусь з яблуками</a></li> <li><a href="#">Крупеник новгородський</a></li> <li><a href="#">Раки російською</a></li>
</ul>
</li> <li><a href="#">Українська кухня</a> <ul> <li><a href="#">Вареники</a></li> <li><a href="#">Спекотне по-харківськи</a></li> <li><a href="#">Капустняк чернігівський</a></li> <li><a href="#">Потапці з помідорами</a></li>
</ul>
</li> <li><a href="#">Кавказька кухня</a></li>
</ul>
</body>
</html>