Родственные селекторы | CSS | WebReference
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.
Здесь красный цвет текста будет установлен для всех абзацев.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<div><p>Абзац 2</p></div>
<p>Абзац 3</p>Синтаксис
E ~ F { Описание правил стиля }Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F.
Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует после него.
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы</title> <style> img { display: none; } #switch:checked ~ img { display: block; } </style> </head> <body> <form> <input type=»checkbox»> <label for=»switch»>Показать картинки</label> <img src=»image/thumb1.jpg» alt=»»> <img src=»image/thumb2.jpg» alt=»»> <img src=»image/thumb3.
В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.
Спецификация
| Спецификация | Статус |
|---|---|
| Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 7 | 12 | 1 | 9 | 3 | 1 |
| 1 | 1 | 9 | 3 |
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Как кастомизировать заголовок в Тильде с помощью CSS
Поговорим про стилизацию заголовков в Тильде, если стандартных возможностей недостаточно и нужно применить уникальные стили для элементов.
В Tilda можно оформить текст в стандартных блоках, используя встроенные возможности конструктора. Но иногда требуется пойти дальше стандартных возможностей — в таких случаях можно подключить CSS и задать индивидуальные настройки.
На примере предлагаю кастомизировать несколько заголовков в блоках Тильды — определим интервал между символами в пределах заголовка атрибутом letter-spacing и зададим насыщенность шрифта с помощью font-weight.
На первом шаге найдите на странице нужные элементы для которых хотите применить стили. Далее откройте консоль разработчика, используя клавиши Ctrl + Shift + I и скопируйте CSS-классы для каждого элемента.
Для моих заголовков получился такой список классов.
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom, #rec51629762 .tn-elem[data-elem-id="1617017169"] .
tn-atom
На втором шаге нужно подключить CSS-стили. Перейдите в режим редактирования страницы и добавьте новый блок «T123. HTML-код». Найти блок можно в библиотеке стандартных блоков в разделе «Другое». В режиме редактирования блока можно добавить HTML, CSS и JS-код.
Теперь подключите стили для заголовков, используя элементы </style> и укажите свойства letter-spacing и font-weight и значения для них.
<style>
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -3px;
font-weight: 800 !important;
}
</style>
Если нужно задать разные стили для мобильных экранов и десктопа, то можно добавить медиа-запрос, используя директиву 
<style>
/* Заголовки для десктопа */
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -3px;
font-weight: 800 !important;
}
/* Заголовки для мобайла */
@media (max-width: 640px) {
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -1px;
font-weight: 600 !important;
}
}
</style>
Чтобы изменения вступили в силу сохраните CSS-код в блоке и опубликуйте страницу.
Что важного в диджитал на этой неделе?
Каждую субботу я отправляю письмо с новостями, ссылками на исследования и статьи, чтобы вы не пропустили ничего важного в интернет-маркетинге за неделю.
Узнать подробнее →
Метки #css, #tilda
Опубликовано Рубрики Материалы, ПрактикумЧто обозначает символ тильда (~) в CSS?
900 07
< ч />
|
bootstrapcdn.com /bootstrap/4.3.1/css/bootstrap.min.css"> 
Подготовьтесь к вербовке 
Подготовьтесь к вербовке Что означает селектор CSS "~" (тильда/волнистая линия/вертушка)?
спросил
Изменено 8 месяцев назад
Просмотрено
374 тыс.
раз
Поиск символа ~ непрост. Я просматривал некоторые CSS и нашел это
.check:checked ~ .content {
}
Что это значит?
- css
- css-селекторы
0
Селектор ~ на самом деле является комбинатором последующих братьев и сестер (до 2017 года назывался общим комбинатором братьев и сестер):
Комбинатор последующего брата состоит из «тильды» (U+007E, ~) символ, разделяющий две последовательности простых селекторов. элементы, представленные двумя последовательностями, имеют одного и того же родителя в дерево документов и элемент, представленный первой последовательностью предшествует (не обязательно непосредственно) элементу, представленному второй.
Рассмотрим следующий пример:
.a ~ .b {
фоновый цвет: голубой;
} <ул>
. соответствует 4-му и 5-му элементам списка, потому что они:
a ~ .b
- Являются
.bэлементами - Являются братьями и сестрами
.a - Появляется после
.aв исходном порядке HTML.
Аналогично, .check:checked ~ .content соответствует всем элементам .content , которые являются одноуровневыми элементами .check:checked и появляются после него.
4
Хорошо также проверить другие комбинаторы в семействе и вернуться к этому конкретному комбинатору.
-
ул ли -
ул > ли -
ул + ул -
ул ~ ул
Пример контрольного списка:
-
ul li- Взгляд внутрь - Выбирает всеliэлементов, размещенных (где угодно) внутриул; Комбинатор потомков -
ul > li- Заглянуть внутрь - Выбирает только прямыеliэлементыul; то есть будут выбраны только прямые детиliизул; Детский комбинатор -
ul + ul- Взгляд снаружи - Выбираетulсразу послеul; Это не поиск внутри, а поиск вовне непосредственно следующего за ним элемента; Комбинатор смежных братьев и сестер / Комбинатор смежных братьев и сестер -
ul ~ ul- Взгляд снаружи - Выбирает все следующиеul, но обаulдолжны иметь одного родителя; Общий одноуровневый комбинатор / Последующий одноуровневый комбинатор
Мы рассматриваем здесь Общий одноуровневый комбинатор / Последующий одноуровневый комбинатор
1
Это сообщение помечено как устаревшее, поскольку его содержание устарело.
В настоящее время он не принимает новые взаимодействия.
Общий комбинатор
Общий селектор родственного комбинатора очень похож на соседний родственный селектор комбинатора. Разница в том, что выбранный элемент не обязательно должен следовать сразу за первым элементом, но может появиться где угодно после него.
Подробнее
0
Спасибо за ответ на вопрос о переполнении стека!
- Обязательно ответьте на вопрос . Предоставьте подробности и поделитесь своим исследованием!
Но избегайте …
- Просьбы о помощи, разъяснения или ответы на другие ответы.
- Заявления, основанные на мнении; подкрепите их ссылками или личным опытом.
Чтобы узнать больше, ознакомьтесь с нашими советами по написанию отличных ответов.
