Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Селекторы потомков CSS предназначены для применения стилей ко всем потомкам указанного элемента. Эти селекторы являются составными, то есть складываются из простых селекторов (классы, идентификаторы, селекторы тегов и т.д.), которые мы с вами изучали в прошлых уроках.

Как вы знаете из учебника по HTML, элемент является потомком для другого элемента (предка), когда он находится внутри него на любом уровне вложенности. Если подзабыли, то давайте еще раз повторим, рассмотрев такой пример:

<тег1>
 <тег2>...</тег2>
 <тег3><тег4>...</тег4></тег3>
</тег1>

В этом примере все элементы являются потомками элемента <тег1>, но вместе с этим <тег4> еще и потомок элемента <тег3>.

Теперь о синтаксисе. Селекторы потомков могут состоять из двух и более селекторов разделенных пробелами, где сначала записывается предок, потом его потомок, далее можно дополнительно указать потомка этого потомка и так далее. Другими словами, указывается путь, по которому необходимо пройти в дереве документа. При этом стили применятся к элементу или элементам, селекторы которых находятся в конце данного списка. Общий синтаксис:

селектор1 селектор2 { свойство: значение; свойство: значение; ... }

Пример использования селекторов потомков в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Селекторы потомков</title>
  <style type="text/css">
   div p {
    font-weight: bold; /* жирный шрифт всех параграфов внутри элементов DIV */
   }
   #div1 span {
    color: red; /* красный текст всех SPAN внутри элемента с id="div1" */
   }
   #div1 .parag1 span {
    text-decoration: underline; /* подчеркнутый текст догадайтесь сами где */
   }
   #div2 .parag1 span {
    color: blue; /* синий текст */
   }
  </style>
 </head>
 <body>
  <div id="div1">
   <p class="parag1">Параграф1 <span>внутри</span> DIV1.</p>
   <p class="parag2">Параграф2 <span>внутри</span> DIV1.</p>
  </div>
  <div id="div2">
   <p class="parag1">Параграф1 <span>внутри</span> DIV2.</p>
   <p class="parag2">Параграф2 <span>внутри</span> DIV2.</p>
  </div>
  <p class="parag1">Последний параграф.</p>
 </body>
</html>

Результат в браузере

Параграф1 внутри DIV1.

Параграф2 внутри DIV1.

Параграф1 внутри DIV2.

Параграф2 внутри DIV2.

Последний параграф.

С помощью селекторов потомков очень удобно изменять стили элементов, когда у сайта уже есть много страниц и не хочется вносить изменения в существующий HTML-код. Поэтому рекомендую вам еще на этапе создания макета страниц присвоить основным блокам уникальный id, например id="header" для шапки сайта, id="footer" для нижней части и так далее. Тогда, даже если у вас в разных участках будут попадаться одинаковые элементы (например, с одним и тем же классом) — вы во многих случаях сможете изменить какой-либо из них, всего лишь подправив один файл с таблицей стилей.

В принципе, вместо id конечно можно использовать и класс (тут главное следить, чтобы его имя не встречалось на странице два раза) но идентификаторы все-таки больше дисциплинируют в этом плане.

Селекторы потомков и универсальный селектор

То, что мы с вами уже изучили о селекторах потомков очень полезно и одновременно просто, не правда ли? Но многие верстальщики, причем не только новички, но и профессионалы, подчас забывают об их очень полезном сочетании с универсальным селектором, позволяющем иногда серьезно сократить объем CSS-кода. Особенно, если надо изменить стили у нескольких элементов находящихся на одном уровне вложенности.

Пример совместного использования селекторов потомков и универсального селектора в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Селекторы потомков с универсальным селектором</title>
  <style type="text/css">
   div * {
   color: green; /* зеленый текст для всех потомков DIV */
   }
   div * * {
   text-decoration: underline; /* подчеркнутый текст для всех элементов, которые
                               вложены в DIV более, чем на один уровень */
   }
   div * span {
    font-size: 150%; /* размер шрифта всех SPAN, которые
                     вложены в DIV более, чем на один уровень */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Параграф1.</p>
   <p>Параграф2. <span>Span.</span></p>
   <p>Параграф3. <strong>Strong.</strong></p>
  </div>
 </body>
</html>

Результат в браузере

Параграф1.

Параграф2. Span.

Параграф3. Strong.

Домашнее задание.

Внимание. В этом домашнем задании вы можете использовать только пять идентификаторов, любые селекторы тегов и селекторы потомков, больше ничего.

  1. Создайте трехколоночный макет с шапкой и футером (без использования таблиц).
  2. Вставьте в шапку страницы логотип сайта в виде ссылки-изображения.
  3. Создайте в левой и правой колонке по меню на основе списков. Пусть в левом меню половина ссылок будет черного цвета и половина — красного, а в правом меню — половина черного и половина — синего.
  4. Сделайте в футере страницы горизонтальное меню на основе списка, а не просто ссылок в блоке. Используйте для этого свойство display. Да, и пусть это меню располагается по центру страницы.
  5. Напишите в центральной части страницы несколько параграфов, а между ними укажите ссылку-изображение и разместите ее по центру.
  6. Уберите поля по краям страницы, рамки у ссылок-изображений и маркеры у списков.
Идентификаторы← Содержание →Дочерние селекторы
Учебник CSS