1105

Searching for the ~ character isn't easy. I was looking over some CSS and found this

.check:checked ~ .content {
}

What does it mean?

0

4 Answers 4

1645

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;
}
<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b matches the 4th and 5th list item because they:

  • Are .b elements
  • Are siblings of .a
  • Appear after .a in HTML source order.

Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it.

4
  • 1
    @SalmanA, Surely there got to be a way to select everything before instead of everything after? ¶ stackoverflow.com/q/28007288/632951
    – Pacerier
    Mar 16, 2018 at 0:44
  • @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.
    – Salman A
    Mar 16, 2018 at 5:07
  • @card-prefix-cls: ~"@{css-prefix}card";, I have seen the tilde symbol of ~ in less style file, what does it mean?
    – soarinblue
    Dec 18, 2018 at 2:43
  • @HerrSerker you are not correct. Please review an example at developer.mozilla.org/en-US/docs/Web/CSS/:checked
    – azakgaim
    Jan 15, 2019 at 17:57
313

Good to also check the other combinators in the family and to get back to what is this specific one.

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

Example checklist:


The one we are looking at here is the General sibling combinator / Subsequent-sibling combinator

1
  • 38
    Looking outside can be misleading. ... Looking alongside may be better.
    – Abdull
    Dec 14, 2021 at 8:42
181

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.

More info

0
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.