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

Селектор соседних элементов (от англ. adjacent sibling selector – селектор соседних элементов) выбирает элементы требуемого типа, которые идут после указанного в селекторе элемента, например, p+span {блок объявлений}.

Синтаксис

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		br+em{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>

	<span>Текст...</span> <br>
	<!--  Элемент «em» расположен после элемента «br»  -->
	<em>Курсив оранжевого цвета.</em>
	
</body>
</html>

Пример №1