Searching for the ~ character isn't easy. I was looking over some CSS and found this
.check:checked ~ .content {
}
What does it mean?
Add a comment
|
4 Answers
The ~ selector is in fact the subsequent-sibling combinator (previously called general sibling combinator until 2017):
The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
Consider the following example:
.a ~ .b {
background-color: powderblue;
}<ol>
<li class="b">b</li>
<li class="a">a</li>
<li class="x">x</li>
<li class="b">b</li>
<li class="b">b</li>
</ol>.a ~ .b matches the 4th and 5th list item because they:
- Are
.belements - Are siblings of
.a - Appear after
.ain HTML source order.
Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it.
3 Comments
Pacerier
@SalmanA, Surely there got to be a way to select everything before instead of everything after? ¶ stackoverflow.com/q/28007288/632951
Salman Arshad
@Pacerier no. See stackoverflow.com/q/1014861/87015, the reasons applies to your question as well. TL;DR CSS is designed so that browser does not have to go back (or up) and re-style some element if current element matches a rule. Imagine changing font size of entire
<body> after it is rendered only because the last is <div class=reset-font>. @HerrSerker is correct but (IMO) the sentence is incorrectly phrased.
soarinblue
@card-prefix-cls: ~"@{css-prefix}card";, I have seen the tilde symbol of ~ in less style file, what does it mean?Good to also check the other combinators in the family and to get back to what is this specific one.
ul liul > liul + ulul ~ ul
Example checklist:
ul li- Looking inside - Selects all thelielements placed (anywhere) inside theul; Descendant combinatorul > li- Looking inside - Selects only the directlielements oful; i.e. it will only select direct childrenlioful; Child combinatorul + ul- Looking outside - Selects theulimmediately following theul; It is not looking inside, but looking outside for the immediately following element; Adjacent sibling combinator / Next-sibling combinatorul ~ ul- Looking outside - Selects all the followingul's, but bothul's should be having the same parent; General sibling combinator / Subsequent-sibling combinator
The one we are looking at here is the General sibling combinator / Subsequent-sibling combinator
Comments
General sibling combinator
The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.
Comments
Here's some more elaborate snippets based on the first answer.
Basically ~ will select
- multiple adjacent siblings
- multiple sibling groups within the same tag
- multiple times all over the document
.a ~ .b {
background-color: powderblue;
}<ul>
<li class="a">1st</li>
<li class="b">2nd</li>
<li class="c">3rd</li>
<li class="a">4th</li>
<li class="b">5th</li>
<li class="b">6th</li>
</ul>
<ul>
<li class="a">1st</li>
<li class="b">2nd</li>
<li class="c">3rd</li>
<li class="a">4th</li>
<li class="b">5th</li>
<li class="b">6th</li>
</ul>+ will select
- exactly one adjacent sibling
- multiple sibling groups within the same tag
- multiple times all over the document
.a + .b {
background-color: powderblue;
}<ul>
<li class="a">1st</li>
<li class="b">2nd</li>
<li class="c">3rd</li>
<li class="a">4th</li>
<li class="b">5th</li>
<li class="b">6th</li>
</ul>
<ul>
<li class="a">1st</li>
<li class="b">2nd</li>
<li class="c">3rd</li>
<li class="a">4th</li>
<li class="b">5th</li>
<li class="b">6th</li>
</ul>Or stated another way...
+is one adjacent sibling~is all adjacent siblings
