Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector
This article explains how to use different signs like space, +(plus), >(greater than) and ~(tilde) in CSS selector and their differences. Before getting started, let us take a sample code to understand the signs.
FirstChild Paragraph
Second
Third
Here is outline structure for better understanding:
Video Tutorial:
Subscribe on YouTube
Space:
It is the descendant selector. It allows you to style all the nested child elements of a parent element, regardless of how deep they are in the hierarchy.
It will target all p tags within container div in our example.
> Sign:
It is a child selector, which selects DIRECT child elements of a specified parent element.
It will target all P element which are direct children of container div, not children of child div.
+ (plus) Sign:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.
~ (tilde) Sign:
It is general sibling combinator and similar to Adjacent sibling combinator. The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.
It will target all P elements which follows div i.e. both second and third.
In this post, we saw how the plus sign +, tilde ~, space and greater than > symbols are used as CSS selectors to target specific elements based on their relationship to other elements in the HTML structure.
Do let us know how you are using it practically?
66 comments
All of this should be avoided. Reason content may change especially on real-world apps and CSS will break.
+1 Me personally haven’t used the “+” nor “~” in my entire programming life span which is roughly 15+ years. I try to always give any node a distinctive className. Makes things easier to understand, and will not break things when you add/remove nodes in between the lines. I also don’t like confusing symbols that require me to think/understand what it does, it hurts my brain…
Понять комбинаторные селекторы и селекторы потомков в CSS
Периодически я сталкиваюсь с проблемой — не хочу ставить лишний класс элементу внутри различных кнопок, ссылок и label-ов. Зачастую это текст, который нужно подсветить или галочка чекбокса или маленькая иконка.
Как же справиться с такой проблемой? Тут самым простым и понятным решением будет наследование. Возьмём код ссылки с иконкой, которую нужно анимировать:
Сделать это несложно, достаточно просто прописать несколько правил:
/*БАЗОВЫЕ ПРАВИЛА*/ a < text-decoration: none; color: inherit; font-family: sans-serif; >.text_arrow-btn < display: flex; align-items: center; font-size: 22px; line-height: 142%; >/*ИСПОЛЬЗОВАНИЕ НАСЛЕДОВАНИЯ*/ .text_arrow-btn span < /*Для span которые внутри ссылки*/ margin-right: 16px; >.text_arrow-btn svg < /*Для svg которые внутри ссылки*/ transition: transform 0.3s; width: 36px; height: 14px; >.text_arrow-btn:hover span < text-decoration: underline; >.text_arrow-btn:hover svg
Пробел обращается ко всем детям элемента с подходящим селектором. Символ «больше» > обратится только к прямому потомку.
Да, в CSS выглядет не очень, но в SASS всё уже немного приятнее:
a text-decoration: none color: inherit font-family: sans-serif color: #323F4C .text_arrow-btn display: flex align-items: center span margin-right: 16px svg transition: transform 0.3s width: 36px height: 14px path transition: stroke 0.3s &:hover svg transform: translateX(12px) span text-decoration: underline &:active color: #B6B5B5 path stroke: #B6B5B5Думаю что этим я глаза никому не открыл — вполне стандартная история.
Соседний комбинатор — «+»
Однако, на этом мы не останавливаемся. Теперь другая задача — стилизация чекбокса. Если вы хоть раз сталкивались с этой проблемой, то вы знаете лицо боли. Потому что убрать стандартные стили просто так не получится, получится только убрать чекбокс к чёртовой бабушке и стилизовать заново из div или span . Но чтобы добавить неинтерактивным элементам интерактивности придётся использовать JS. Или не придётся.
Тут нам поможет волшебный + — это комбинатор родственных элементов. Он объединяет два элемента, находящихся на одном уровне, и второй должен следовать СРАЗУ за первым.
Звучит сложно — работает просто. Выбирается следующий сразу за элементом селектор. Вот так:
.main-checkbox cursor: pointer span display: inline-block width: 24px height: 24px background: #F8F8F8 display: flex align-items: center justify-content: center transition: background 0.3s svg width: 12px height: 9px opacity: 0 transition: opacity 0.3s &:hover span background: #EBEBEB input display: none &:checked+span /*вот он*/ background: #F8F8F8 svg opacity: 1Обращаем внимание на: &:checked+span тут «+» говорит нам о том, что будет выбран следующий за чекнутым input span . И вуаля — чекбокс работает как часы и он стилизован.
Родственный комбинатор — «~»
Но мы не останавливаемся. Имеем ещё одну задачу: чекбокс у которого внутри идёт span и svg одновременно и нужно при наведении изменить цвет и текста и svg. Да, можно обернуть элементы в div и использовать + , но фу, лишний тег — это полный отстой.
Тут нам поможет тильда ~ (не путать с тильтом). Этот символ не выражает усталость и безысходность — совсем наоборот. Он даёт нам выбрать теги, находящиеся на одном уровне с элементом.
Вот наш чекбокс с иконкой:
.radio-sort font-family: sans-serif margin-right: 48px cursor: pointer display: flex align-items: center &:last-child margin-right: 0 input display: none span display: inline-block svg width: 10px height: 14px display: inline-block margin-left: 12px input:checked + span font-weight: 800 input:hover + span color: #1eaf9f input:hover ~ svg path stroke: #1eaf9fтильда выберет следующий за span svg — очень удобно!
Пробел — выберет все дочерние элементы, соответствующие селектору:
Знак больше > выберет только дочерние элементы, являющиеся прямыми потомками:
Знак + выберет следующего за элементом потомка:
Тильда ~ выберет всех одноуровневых потомков:
Что означает селектор CSS «>» (знак больше)?
Это означает, что селектор div > p.some_class соответствует только абзацам .some_class , вложенным непосредственно внутри div , а не любым абзацам, вложенным дальше. Это означает, что каждый элемент, соответствующий div > p.some_class , обязательно также соответствует div p.some_class с тегом комбинатор потомков (пробел), поэтому их часто путают.
Иллюстрация, сравнивающая дочерний комбинатор с потомком комбинатора:
div > p.some_class < background: yellow; >div p.some_class
Some text here
p.some_class, div p.some_class --> More text here
Какие элементы соответствуют каким селекторам?
- Соответствует как div > p.some_class , так и div p.some_class
Этот p.some_class расположен непосредственно внутри div , следовательно, между обоими элементами устанавливаются родительско-дочерние отношения. Поскольку «дочерний элемент» является типом «потомка», любой дочерний элемент по определению также является потомком. Следовательно, применяются оба правила. - Соответствует только div p.some_class
Этот p.some_class содержится в blockquote внутри div , а не в самом div . Хотя этот p.some_class является потомком div , он не является потомком; это внук. Следовательно, применяется только правило с комбинатором потомков в его селекторе.
1 Многие люди идут дальше, называя его «прямым потомком» или «непосредственным потомком», но это совершенно не нужно (и меня невероятно раздражает), потому что дочерний элемент является непосредственным по определению , так что они означают одно и то же. Не существует такого понятия, как «косвенный потомок».
+1 Это действительно называется дочерним селектором ? Если так, то это вводит в заблуждение. Я бы подумал, что #something a будет дочерним селектором.
@alex: да 🙂 #something a мог бы означает, что a является внуком или правнуком ^ n #something (не учитывает глубину вложенности).