Селекторы потомков CSS

Десцентный селектор (descendant selector) также известен как селектор содержащего элемента.

Наследуемый селектор может выбирать элементы, являющиеся потомками определенного элемента.

Выбор элементов в зависимости от контекста

Мы можем определить наследуемый селектор, чтобы создать правила, которые будут действовать в некоторых документах, но не в других.

Например, если вы хотите применить стиль только к em в элементе h1, можно написать следующим образом:

h1 em {color:red;}

Этот правил изменит текст em, являющегося потомком h1, на красный. Другой текст em (например, в абзацах или цитатах) не будет выбран этим правилом:

<h1>Это важный заголовок</h1>
<p>Это важный абзац.</p>

Попробуйте сами

Конечно, вы также можете добавить атрибут класса к каждому em, который находится в h1, но显然, наследуемый селектор более эффективен.

Объяснение грамматики

В наследуемом селекторе справа от правила включается два или более селекторов, разделенных пробелами. Пробелы между селекторами являются комбинаторами. Каждый комбинатор можно интерпретировать как «... в ... найти», «... как часть ...», «... как потомок ...», но при этом селектор нужно читать слева направо.

Таким образом, селектор h1 em можно интерпретировать как «любой em, являющийся потомком h1». Если читать селектор слева направо, можно сказать следующим образом: «все h1, содержащие em, будут применять следующий стиль к этому em».

Конкретное применение

Функциональность наследуемого селектора очень мощная. С его помощью можно сделать возможным выполнение задач, которые в HTML не могут быть реализованы.

Предположим, что у нас есть документ, который содержит sidebar и основную область. Фон sidebar синий, а фон основной области белый. Обе области содержат список ссылок. Все ссылки не могут быть сделаны синими, так как в этом случае синие ссылки sidebar будут незаметны.

Решением является использование наследуемого селектора. В этом случае, для div, содержащего sidebar, можно определить атрибут класса sidebar, а для области的主要内容 установить атрибут класса maincontent. Затем нужно написать следующие стили:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

У селекторов потомков есть один легко игнорируемый аспект, а именно, что разрыв между двумя элементами может быть бесконечным.

Например, если пишется ul em, этот синтаксис会选择从ul элемента наследующие все em элементы, независимо от уровня их вложенности.

Таким образом, ul em会选择以下标记中的所有em元素：

<ul>
  <li>Элемент списка 1</li>
    <ol>
      <li>Элемент списка 1-1</li>
      <li>Элемент списка 1-2</li>
      <li>Элемент списка 1-3</li>
        <ol>
          <li>Элемент списка 1-3-1</li>
          <li>Элемент списка</li> <em>1-3-2</em></li>
          <li>Элемент списка 1-3-3</li>
        </ol>
      </li>
      <li>Элемент списка 1-4</li>
    </ol>
  </li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

Попробуйте сами