Селектори за ієрархією, або контекстні селектори, дозволяють задавати правила оформлення елементів з урахуванням їхнього розташування в загальній ієрархії елементів сторінки, тобто — з урахуванням контексту.
Наприклад, можна по-різному оформлювати звичайні абзаци та абзаци, вкладені в комірки таблиці, прості гіперпосилання та гіперпосилання головного меню сторінки тощо.
При створенні контекстних селекторів батьківські селектори перераховуються через пробіл від батьків до нащадків.
Призначити CSS-властивості посиланням, розміщеним в абзацах сторінки, при цьому так, щоб ці CSS-властивості не впливали на інші посилання, наприклад, ті, що знаходяться в меню сайту.
Розглянемо наступний HTML-документ, посилання виділені червоним кольором:
Для того щоб зробити посилання в абзацах p червоними на блакитному фоні, а інші посилання (наприклад у меню) не змінювати, потрібно створити наступний CSS-код:
p a { color: red; background-color: cyan; }
