Родственные селекторы - A ~ B » Новости мира Интернет
Вышел Wine 11 — запуск Windows-приложений и игр в Linux и macOS стал почти «родным» - «Новости сети»
Вышел Wine 11 — запуск Windows-приложений и игр в Linux и macOS стал почти «родным» - «Новости сети»
Глава Google DeepMind считает, что китайские разработчики ИИ-моделей отстают от американских лишь на несколько месяцев - «Новости сети»
Глава Google DeepMind считает, что китайские разработчики ИИ-моделей отстают от американских лишь на несколько месяцев - «Новости сети»
Две игры в одной: Capcom показала геймплей Resident Evil Requiem за Грейс и Леона - «Новости сети»
Две игры в одной: Capcom показала геймплей Resident Evil Requiem за Грейс и Леона - «Новости сети»
Nvidia настаивает, что сокращений в номенклатуре GeForce RTX 50 нет, но есть проблемы с поставками - «Новости сети»
Nvidia настаивает, что сокращений в номенклатуре GeForce RTX 50 нет, но есть проблемы с поставками - «Новости сети»
США вслед за Россией и Китаем пообещали построить атомную электростанцию на Луне - «Новости сети»
США вслед за Россией и Китаем пообещали построить атомную электростанцию на Луне - «Новости сети»
Apple выбрала Gemini в качестве основы для новой Siri - «Новости мира Интернет»
Apple выбрала Gemini в качестве основы для новой Siri - «Новости мира Интернет»
Apple представила платформу Creator Studio с коллекцией приложений для творчества - «Новости мира Интернет»
Apple представила платформу Creator Studio с коллекцией приложений для творчества - «Новости мира Интернет»
Google научила Veo создавать вертикальные видео в 4K для мобильных платформ - «Новости мира Интернет»
Google научила Veo создавать вертикальные видео в 4K для мобильных платформ - «Новости мира Интернет»
NVIDIA добавила поддержку DLSS 4.5 Super Resolution во все видеокарты GeForce RTX - «Новости мира Интернет»
NVIDIA добавила поддержку DLSS 4.5 Super Resolution во все видеокарты GeForce RTX - «Новости мира Интернет»
Spigen выпустила ретро-чехол для iPhone 17 Pro в стиле классического Macintosh - «Новости мира Интернет»
Spigen выпустила ретро-чехол для iPhone 17 Pro в стиле классического Macintosh - «Новости мира Интернет»
Новости мира Интернет » Справочник CSS » Родственные селекторы - A ~ B
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 5.0+ 9.2+ 3.0+ 1.0+ 1.0+ 1.0+

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

Здесь красный цвет текста будет установлен для всех абзацев.

h1 ~ p { color: red; 
<h1>Заголовок</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>

Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h1> и <p> не имеют общего родителя.

h1 ~ p { color: red; 
<h1>Заголовок</h1>
<p>Абзац 1</p>
 <div><p>Абзац 2</p></div>
<p>Абзац 3</p>

Синтаксис

E ~ F { Описание правил стиля

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы</title>
  <style>
   thumb {
    display: none;
   
   #switch:checked ~ thumb {
    display: block;
   
  </style>
 </head>
 <body>
  <form>
   <input type="checkbox" id="switch"> 
   <label for="switch">Показать картинки</label>
    <thumb src="images/thumb1.jpg" alt="">
    <thumb src="images/thumb2.jpg" alt="">
    <thumb src="images/thumb3.jpg" alt="">
  </form>
 </body>
</html>

В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 7.0 5.0 9.2 3.0 1.0 1.0 1.0 Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам , располагающихся после заголовка . При этом и должны иметь общего родителя, так что если вставить внутрь , то стили применяться уже не будут. Здесь красный цвет текста будет установлен для всех абзацев. Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку и не имеют общего родителя. Синтаксис E ~ F _

Смотрите также

А что там на главной? )))



Комментарии )))