CSS :: Селектор родственных элементов

Cелектор родственных элементов (от англ. sibling element selector – селектор родственных элементов) выбирает элементы требуемого типа, которые идут после указанного в селекторе элемента и вдобавок имеют с ним общего родителя. Например, если span~em {блок объявлений}, то будут выбраны все элементы <em>, которые идут после элементов <span> и имеют с ним общего родителя.

Синтаксис

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		span~em{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		<span>Я «span», который идет перед «em».</span>
		<em>Я оранжевого цвета, т.к. я расположен после «span» 
		и у нас общий родительский элемент «p».</em>
	</p>
	
</body>
</html>

Пример №1