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

Дочерние селекторы CSS

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

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

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

Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2> и <тег3> являются дочками <тег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">
   body > div {
    border: 2px green solid; /* стили рамки DIV, когда он дочка BODY */
    margin: 20px; /* размер внешних полей */
    padding: 0 10px; /* размер внутренних отступов */
   }
   div > div > p {
    color: blue; /* синий текст параграфов, когда они дочерние у DIV,
                    который является дочкой другого DIV */
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <p>Параграф1.</p>
   </div>
  </div>
  
  <div>
   <p>Параграф2.</p>
  </div>
 </body>
</html>

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

Параграф1.

Параграф2.

В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента <DIV>, но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.

Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера — помните об этом.

Дочерние селекторы в HTML-таблицах

Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем идет речь, давайте посмотрим на такую обычную таблицу.

<table>
 <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
 <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
</table>

А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега <TABLE> к ячейкам? Если вы решили написать вот так, то это неверно:

table > tr > td { свойство: значение; свойство: значение; ... }

А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент — <TBODY>, который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.

table > tbody > tr > td { свойство: значение; свойство: значение; ... }

Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.

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

  1. Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
  2. Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
  3. Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например <EM> для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
  4. Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство position и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.

Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.

Селекторы потомков← Содержание →Соседние селекторы
Учебник CSS