Селекторы дочерних элементов

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

Селекторы дочерних элементов отличаются от селекторов потомков тем, что позволяют выбрать элементы только первого уровня вложенности. Например:

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

Хотя вложенными в элемент body элементами являются целых три - h2, div, p, но дочерними из них являются только два - div и h2, так как они находятся в первом уровне вложенности. А элемент p находится на втором уровне вложенности, так как вложен внутрь элемента div, а не просто элемента body.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			.article > p{
			
				color: red;
			}
        </style>
    </head>
    <body>
        <div class="article">
			<p>Аннотация к статье</p>
			<div class="content">
				<p>Текст статьи</p>
			</div>
		</div>
    </body>
</html>

В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся непосредственно в блоке article:

Селекторы дочерних элементов в CSS3

Если бы мы использовали другой селектор без символа >

.article p{
			
	color: red;
}

Тогда стиль бы применялся ко всем параграфам на всех уровнях вложенности:

Селекторы вложенных элементов в CSS

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

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