CSS :: Селектор потомков

Селектор потомков (от англ. descendant selector – селектор потомков) выбирает все элементы требуемого типа, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя). Например, если задано правило div p span {блок объявлений}, то стиль будет применен ко всем элементам <span>, которые находятся внутри абзацев, в свою очередь находящихся внутри элемента <div>.

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

Синтаксис

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		/* Селектор потомков выбирает элементы, */
		/* вложенные в элементы-родители */
			
		div p span{
		color: red;			 
		font-weight: bold;	 
		}
		
	</style>
	
</head>
<body>

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

Пример №1