CSS :: Cелектор родственных элементов
okmysite.com
HTML и CSS для начинающих

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

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

Синтаксис

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

Ссылки

Примеры

HTML Результат okmysiteCodes
<!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