Контекстные определения

6. Контекстные определения

Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности элементов. Такие определения называются контекстными определениями.

Для задания контекстного определения в его заголовке через пробелы (пробел — символ-комбинатор селектора потомка) перечисляются селекторы в порядке предполагаемой вложенности элементов, которые им соответствуют. Например, можно установить цвет для EM красным только для случая, когда этот элемент расположен внутри элемента P.

Файл style.css

P EM
{
  color:red;
}

Определение работает только для EM внутри абзаца и не работает для других EM. Определение работает и тогда, когда EM является не прямым потомком P.

Файл index.htm

Посмотрим на такой пример.

Файл style.css

P .mark
{
  color:red;
}

Определение работает только для тех элементов с классом mark, которые вложены в P.

Файл index.htm

Ещё один пример контекстного определения.

Видим, что EM внутри P записывается красным, а внутри H1 — чёрным. Обратите внимание, что в заголовке стилевого определения отсутствует запятая. Это и есть признак контекстного определения. Если же записать P, EM {color:red;}, то красный цвет приобретут как элементы P, так и элементы EM.

И последний пример контекстного определения.

Заметьте, что все элементы списка записаны рубленым шрифтом (правило font-family:sans-serif), но только элементы вложенного списка выводятся красным цветом (color:red).