Cелектор родственных элементов | Справочник CSS
http://belarusweb.net
Основы создания сайтов

Cелектор родственных элементов

Описание

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

Синтаксис

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

Ссылки

Примеры

HTML Результат BwCodes
<!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' 
		и у нас общий родительский блок 'div'.</em>
	<p>
	
</body>
</html>

Пример №1