Контекстні селектори (селектори за ієрархією) дозволяють задавати правила оформлення елементів з урахуванням їхнього розташування в загальній ієрархії елементів сторінки, тобто з урахуванням контексту.
Наприклад, можна по-різному оформлювати звичайні абзаци та абзаци, вкладені в комірки таблиці, прості гіперпосилання та гіперпосилання головного меню сторінки тощо.
При створенні контекстних селекторів батьківські селектори перераховуються через пробіл від батьків до нащадків. Останній селектор вказує на елемент, до якого застосовуються правила.
батько потомок { властивість: значення; }
Призначити CSS-властивості посиланням, розміщеним в абзацах сторінки, при цьому так, щоб ці CSS-властивості не впливали на інші посилання, наприклад, ті, що знаходяться в меню сайту.
<!DOCTYPE html>
<html>
<head>
<style>
p a {
color: red;
background-color: cyan;
}
</style>
</head>
<body>
<p>Це абзац з <a href="#">посиланням</a> всередині.</p>
<ul>
<li><a href="#">Посилання в меню</a></li>
</ul>
</body>
</html>Це абзац з посиланням всередині.
Часто потрібно стилізувати лише ті посилання, які знаходяться безпосередньо в пунктах меню (наприклад, у <ul> з класом menu).
ul.menu > li > a {
color: green;
font-weight: bold;
text-decoration: none;
}Цей селектор застосується тільки до посилань, які є прямими дочірніми елементами <li>, що в свою чергу є прямими дочірніми елементами <ul> з класом menu.
Контекстні селектори можуть складатися з будь-якої кількості рівнів. Наприклад, стилізуємо <span>, який знаходиться всередині <p>, що всередині <div>.
div p span {
color: purple;
font-style: italic;
}Це абзац з виділеним текстом всередині.
Можна комбінувати класи та контекст. Наприклад, задати стиль для посилань всередині елемента з класом .menu.
.menu a {
color: orange;
}Контекстні селектори дають змогу точніше керувати оформленням елементів залежно від їх місця в документі. Це потужний інструмент CSS, який допомагає уникати зайвих класів та ідентифікаторів і робить код чистішим.