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

Дочерние элементы — это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.

Давайте рассмотрим пример простого html-кода:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

В этом коде два абзаца. Внутри абзацев расположены строчные элементы <b>, <i> и <u>. Во втором абзаце тег <i> вложен в тег <u>.

Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.

Синтаксис дочерних селекторов:

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

Вот обновлённый код:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		p>b { color: red; }
		p>i { color: blue; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

Итак, вспомним: дочерний элемент — это элемент вложенный непосредственно в родительский. То есть, дочерний элемент — это потомок первого уровня. Давайте обратим внимание на тег <i>, в первом абзаце он вложен в тег <p>, а во втором он вложен в тег <u>, хотя также является потомком тега <p>. Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color: blue; } не сработает - наклонный текст второго абзаца не будет отображён синим цветом.

CSS: дочерние селекторы: работа примера №1
Рисунок 1. Работа примера №1.

Добраться к html-элементу <i> второго абзаца можно используя CSS-правило: p>u>i { color: blue; }.

Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		p>b   { color: red; }
		p>i   { color: blue; }
		p>u>i { color: yellow; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.

CSS: дочерние селекторы: работа примера №2
Рисунок 2. Работа примера №2.

Более сложный пример

У нас есть html-код:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
</head>
<body>

<ul class="menu">
	<li>Правка
	<ul>
		<li><a href="#">Отменить</a></li>
		<li><a href="#">Вырезать</a></li>
		<li><a href="#">Копировать</a></li>
		<li><a href="#">Вставить</a></li>
	</ul>
	</li>
	<li>Начертание
	<ul>
		<li><a href="#">Жирное</a></li>
		<li><a href="#">Курсивное</a></li>
		<li><a href="#">Подчеркнутое</a></li>
	</ul>
	</li>
	<li>Размер
	<ul>
		<li><a href="#">Маленький</a></li>
		<li><a href="#">Нормальный</a></li>
		<li><a href="#">Средний</a></li>
		<li><a href="#">Большой</a></li>
	</ul>
	</li>
</ul>

</body>
</html>

По умолчанию он интерпритируется так:

Задача: при помощи CSS превратить этот список в горизонтальное меню.

CSS: дочерние селекторы: задание
Рисунок 3. Цель преобразований.

Вот решение этой задачи с использованием дочерних селекторов:

<!DOCTYPE html>
<html>
<head>
	<title>Дочерние элементы.</title>
	<style>
		ul{
			list-style-type: none; /* убираем маркеры списков */
		}
		ul.menu > li{
			float: left; /* разещаем список горизонтально */
			background-color: #C5E7CC;
			font-weight: bold;
		}
		ul.menu > li > ul{
			margin: 4px;
			padding: 0; /* Убираем отступ внутри слева */
		}
		ul.menu > li > ul > li{
			border: 1px solid grey;
			background-color: white;
			padding: 4px;
			font-weight: normal;

		}
		a{
			color: blue;
		}
	</style>
</head>
<body>

<ul class="menu">
	<li>Правка
	<ul>
		<li><a href="#">Отменить</a></li>
		<li><a href="#">Вырезать</a></li>
		<li><a href="#">Копировать</a></li>
		<li><a href="#">Вставить</a></li>
	</ul>
	</li>
	<li>Начертание
	<ul>
		<li><a href="#">Жирное</a></li>
		<li><a href="#">Курсивное</a></li>
		<li><a href="#">Подчеркнутое</a></li>
	</ul>
	</li>
	<li>Размер
	<ul>
		<li><a href="#">Маленький</a></li>
		<li><a href="#">Нормальный</a></li>
		<li><a href="#">Средний</a></li>
		<li><a href="#">Большой</a></li>
	</ul>
	</li>
</ul>

</body>
</html>

Для лучшего понимания этого примера читайте: