У селекторі ви можете передувати імені елемента іменами одного або декількох елементів-предків (батьківський, батьківський плюс батьківський батька і так далі), і правило буде застосоване тільки до елементів з цим ім'ям, які є вкладеними так само. Селектор, який включає один або декілька елементів-предків, називається контекстуальним (contextual) селектором. Селектор, який не включає імен елементів-предків (подібно до тих, з якими ви мали справу в попередньому розділі), називається родовим (generic) селектором.
Якщо певна властивість для одного і того самого елемента має одну установку в правилі з контекстуальним селектором, і іншу установку в правилі з родовим селектором, установка в правилі з контекстуальним селектором домінує, оскільки є більш конкретизованою.
Припустимо, що наступний елемент є кореневим елементом XML-документа:
Santa Fe
New Mexico
California
.
Наступні правила в приєднуваній таблиці стилів змусять браузер відформатувати "New Mexico" звичайним шрифтом, а "California" – курсивом:
CITY STATE
{font-style:normal}
STATE
{font-style:italic}.
Хоча вміст New Mexico елемента STATE відповідає обом контекстуальним селекторам у правилі CITY STATE і родовому селектору в правилі STATE, селектор CITY STATE є конкретнішим і, отже, має пріоритет. (Докладніше про пріоритети і конфлікти правил ви дізнаєтеся в розділі "Привласнення значень у таблицях каскадних стилів" далі).
Примітка. Майте на увазі, що не слід поміщати коми між іменами елементів у контекстному селекторі. Інакше правило буде застосоване до всіх елементів (як було описано в попередньому розділі), але не до останнього дочірнього елемента в списку.