Родственные селекторы
Описание
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам p, располагающихся после заголовка h1. При этом h1 и p должны иметь общего родителя, так что если p вставить внутрь div, то стили применяться уже не будут.
Синтаксис
E ~ F { Описание правил стиля }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.img-test {
display: none;
width: 200px;
}
#switch:checked ~ .img-test {
display: block;
}
</style>
<form>
<input type='checkbox' id='switch' />
<label for='switch'>Показать картинки</label>
<img class='img-test' src='https://mfs.gki-webik.ru/s?path=/images/regular/lava.jpg' alt='' />
<img class='img-test' src='https://mfs.gki-webik.ru/s?path=/images/regular/light-fon-pc.png' alt='' />
<img class='img-test' src='https://mfs.gki-webik.ru/s?path=/images/regular/fon13.jpg' alt='' />
</form>
</body>
</html>Читайте также
Свойство column-rule-color
В многоколоночном тексте задаёт цвет линий между колонок.
Если такой цвет явно не указан, то цвет текста в колонках и цвет линий между ними совпада...
Свойство font-variant
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ измене...
Стиль первого элемента
Псевдокласс задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).
Для выбора первого элемента определённого типа...
Стиль элемента при наведении на него курсора мыши
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата....