[решено] Знак "~" в css

Coutty · Конфигурация компьютера

Первая ссылка из гугла говорит следующее:

Цитата:

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

HTML код:

<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

Вот, Html-код на месте, теперь напишем стили.

HTML код:

/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 1px solid black; }

KrotMen · Конфигурация компьютера

Coutty, а как использовать следующию конструкцию из примера:

Код:

li:hover ~ .class {background:red;}

Coutty · Конфигурация компьютера

Есть элементы li, у которых заданы различные классы:

HTML код:

<html>
	<head>
		<style>
			li:hover ~ .class {background:red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="first">1</li>
			<li class="second">2</li>
			<li class="second class">3</li>
			<li class="class other">4</li>
			<li class="class">5</li>
		</ul>
	</body>
</html>

В данном случае если написать просто li:hover .class {}, то будут выбраны только те элементы, у которых задан ТОЛЬКО один класс class, т.е. только элемент №5. А если li:hover ~.class {}, то все элементы, которые содержат класс class, т.е. 3, 4 и 5.

Sham · Отправлено: **20:07, 05-04-2012** | #5

http://www.w3.org/TR/css3-selectors/#selectors