What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

989
votes

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

.check:checked ~ .content {
}

What does it mean?

5
csscss-selectors
Check the demo you will understand Here is a list of CSS selectors – Dipak
@TylerH, that's something very common used in Stack Overflow posts, please take it easy, I wasn't intended to make it feel worse. – Arsen Khachaturyan
@ArsenKhachaturyan Maybe you misunderstand; block quote syntax is for indicating a quote, which is when a user is indicating something (text, an image, code, etc) is not their own work or words, but is copied from somewhere else. Like all formatting, it has a semantic purpose; it's not something to be added willy-nilly. Likewise, please do not add random bold highlighting to words. It should be used for emphasis, sparingly. – TylerH
@TylerH I understand that it's name is "quote" and also what the "quote" itself means. However sometime when you really want to distinguish questions from ordinary text you can try some emphasis technics like I did. For bolding it's also obvious to use when you want to emphasis things, like keywords or well known terms. I usually don't like when people use bolding for unknown reasons but sometimes it can be used for people to easily find topic related information. – Arsen Khachaturyan
@ArsenKhachaturyan Please don't do that. > is for quotes only, it is never to be used for any other purpose. You also shouldn't bold names of random technologies in the question. We can see which technologies are relevant via tags. – meagar♦

5 Answers

1506
votes

The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 4):

The general 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.

250
votes

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:

  • ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul; Descendant selector
  • ul > li - Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector
  • ul + ul - Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector
  • ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector

The one we are looking at here is General Sibling Selector

179
votes

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

36
votes

It is General sibling combinator and is explained in @Salaman's answer very well.

What I did miss is Adjacent sibling combinator which is + and is closely related to ~.

example would be 

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>
  • Matches elements that are .b
  • Are adjacent to .a
  • After .a in HTML

In example above it will mark 2nd li but not 4th.

   .a + .b {
     background-color: #ff0000;
   }
<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

9
votes

Note that in an attribute selector (e.g., [attr~=value]), the tilde

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors