[решено] Знак "~" в css - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - [решено] Знак "~" в css (http://forum.oszone.net/showthread.php?t=231813)

Знак "~" в css

Что означает знак "~" в css, как его использовать?:mellow:

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

Цитата:

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

Например, мы можем задать наш собственный атрибут 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; }

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

Код:

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

Есть элементы 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.