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

Селектор дочерних элементов (от англ. child element selector – селектор дочерних элементов) выбирает элементы требуемого типа, которые являются дочерними по отношению к указанному в селекторе элементу, например, p>span {блок объявлений}.

Синтаксис

E > F {блок объявлений}

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-3/#child-combinators

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Child_combinator

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p>span{
		color: orange;			 
		font-weight: bold;	 
		}
		
	</style>
	
</head>
<body>

	<p>
		<!--  Здесь «span»  является дочерним, т.к. находится  -->
		<!--  непосредственно внутри элемента «p».  -->
		<span>Мой текст имеет оранжевый цвет и 
		полужирное начертание</span>. <br>
	
		<em>
			<span>Ко мне это правило не относится, 
			т.к. мой родитель элемент «em».</span><br>
		</em>
		
		<!--  Здесь «span» тоже является дочерним.  -->	
		<span>Зато я &ndash; тоже дочерний для «p».</span>
	</p>
	
</body>
</html>

Пример №1