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

Последнее обновление: 21.04.2016

Веб-страница может иметь сложную организацию, одни элементы внутри себя могут определять другие элементы. Вложенные элементы иначе можно назвать потомками. А контейнер этих элементов - родителем.

Например, пусть элемент body на веб-странице имеет следующее содержимое:

<body>
	<h2>Заголовок</h2>
	<div>
		<p>Текст</p>
	</div>
</body>

Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.

А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка.

Используя специальные селекторы, мы можем стилизовать вложенные элементы или потомков внутри строго определенных элементов. Например, у нас на странице могут быть параграфы внутри блока с основным содержимым и внутри блока футера. Но для параграфов внутри блока основного содержимого мы захотим установить один шрифт, а для параграфов футера другой.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Селекторы CSS</title>
		<style>
			#main p{
				font-size: 16px;
			}
			#footer p{
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<p>Первый абзац</p>
			<p>Второй абзац</p>
		</div>
		<div id="footer">
			<p>Текст футера</p>
		</div>
	</body>
</html>
Селекторы вложенных элементов в CSS3

Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:

#main p{
	font-size: 16px;
}

То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.

Рассмотрим другой пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Селекторы CSS</title>
		<style>
			li .redLink{
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Самсунг: <a class="redLink">Galaxy S7 Edge</a></li>
			<li>Apple: <a>iPhome SE</a></li>
			<li>LG: <a class="redLink">LG G5</a></li>
			<li>Microsoft: <a>Lumia 650</a></li>
		</ul>
	</body>
</html>

Здесь стиль применяется к элементам с классом "redLink", которые находятся внутри элемента <li>. И соответственно браузер окрасит эти элементы в красный цвет:

Стилизация дочерних элементов в CSS3

Но обратите внимание на пробел: li .redLink. Данный пробел играет большое значение и указывает как раз, что элементы с классом redLink должны быть вложенными по отношению к элементу <li>

Но если мы уберем пробел:

li.redLink{
	color: red;
}

то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам <li>, которые имеют класс redLink. Например, к следующему элементу:

<li class="redLink">Microsoft: <a>Lumia 650</a></li>

Но никак не к элементу:

<li>LG: <a class="redLink">LG G5</a></li>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850