Контекстный селектор в CSS

Контекстный селектор, представляющий собой команду пробел (' '), позволяет выбирать теги, вложенные в заданного родителя

Синтаксис

селектор1 селектор2 {
	
}

Давайте обратимся ко всем тегам p внутри тегов div и покрасим их в красный цвет:

<div>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

div p {
	color: red;
}

Давайте обратимся ко всем тегам p внутри элемента с #elem и покрасим их в красный цвет:

<div id="elem">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

#elem p {
	color: red;
}

Давайте обратимся ко всем тегам p внутри элементов с классом .block и покрасим их в красный цвет:

<div class="block">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

.block p {
	color: red;
}

Давайте обратимся ко всем тегам b внутри тегов p, находящихся внутри тегов div и покрасим их в красный цвет:

<div>
	<p>
		text <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Дочерний селектор,
который позволяет выбрать элементы по непосредственной вложенности
Соседний селектор,
который позволяет выбрать элемент по его соседу
Родственный селектор,
который позволяет выбрать элементы после заданного
Универсальный селектор,
который позволяет выбрать все элементы