Can you explain the significance of the "~" symbol in CSS selectors?

Question

Can you explain the significance of the "~" symbol in CSS selectors?

Locating the ~ symbol can be quite challenging. While reviewing some CSS code, I came across this:

.check:checked ~ .content {
}

I'm curious about its significance. Can anyone shed some light on it?

css css-selectors

Answer 1

Answer №1

The selector using a tilde (~) character is known as the subsequent-sibling combinator, previously referred to as the general sibling combinator before 2017:

The subsequent-sibling combinator consists of the "~" character that separates two sets of simple selectors. These selectors represent elements with the same parent in the document tree, where the element from the first set comes before (not necessarily directly) the element from the second set.

Here's an example to illustrate this concept:

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

The rule .a ~ .b targets the 4th and 5th list items because they fulfill the following criteria:

They are elements with the class "b"
They are siblings of elements with the class "a"
They appear after elements with the class "a" in the HTML source order

Similarly, .check:checked ~ .content selects all elements with the class "content" that are siblings of elements with the class "check" when they come after it.

Answer 2

The selector using a tilde (~) character is known as the subsequent-sibling combinator, previously referred to as the general sibling combinator before 2017:

The subsequent-sibling combinator consists of the "~" character that separates two sets of simple selectors. These selectors represent elements with the same parent in the document tree, where the element from the first set comes before (not necessarily directly) the element from the second set.

Here's an example to illustrate this concept:

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

The rule .a ~ .b targets the 4th and 5th list items because they fulfill the following criteria:

They are elements with the class "b"
They are siblings of elements with the class "a"
They appear after elements with the class "a" in the HTML source order

Similarly, .check:checked ~ .content selects all elements with the class "content" that are siblings of elements with the class "check" when they come after it.

Answer 3

Answer №2

It's beneficial to explore the various combinators within the CSS selector family and delve deeper into the specifics of each one.

ul li
ul > li
ul + ul
ul ~ ul

Here is an example checklist:

ul li - Looking inside - Selects all the li elements nested within any ul; Descendant combinator
ul > li - Looking inside - Selects only the direct children li of ul; Child combinator
ul + ul - Looking alongside - Selects the ul that immediately follows another ul; It focuses on adjacent siblings rather than descending elements; Adjacent sibling combinator / Next-sibling combinator
ul ~ ul - Looking alongside - Selects all following ul's that share the same parent; General sibling combinator / Subsequent-sibling combinator

The focus here is on the General sibling combinator / Subsequent-sibling combinator

Answer 4

It's beneficial to explore the various combinators within the CSS selector family and delve deeper into the specifics of each one.

ul li
ul > li
ul + ul
ul ~ ul

Here is an example checklist:

ul li - Looking inside - Selects all the li elements nested within any ul; Descendant combinator
ul > li - Looking inside - Selects only the direct children li of ul; Child combinator
ul + ul - Looking alongside - Selects the ul that immediately follows another ul; It focuses on adjacent siblings rather than descending elements; Adjacent sibling combinator / Next-sibling combinator
ul ~ ul - Looking alongside - Selects all following ul's that share the same parent; General sibling combinator / Subsequent-sibling combinator

The focus here is on the General sibling combinator / Subsequent-sibling combinator

Answer 5

Answer №3

Understanding the general sibling combinator

The concept of the general sibling combinator selector closely resembles that of the adjacent sibling combinator selector. The main distinction lies in the fact that the selected element does not necessarily have to immediately follow the first element, but can be located anywhere after it.

Find out more

Answer 6

Understanding the general sibling combinator

The concept of the general sibling combinator selector closely resembles that of the adjacent sibling combinator selector. The main distinction lies in the fact that the selected element does not necessarily have to immediately follow the first element, but can be located anywhere after it.

Find out more

Answer 7

Answer №4

Here are some more detailed examples based on the initial response.

In essence, using the symbol ~ allows you to:

Select multiple adjacent siblings
Select multiple sibling groups within the same tag
Select multiple instances throughout 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>

On the other hand, using the symbol + allows you to:

Select exactly one adjacent sibling
Select multiple sibling groups within the same tag
Select multiple instances throughout 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>

Put simply...

+ selects one adjacent sibling
~ selects all adjacent siblings

Answer 8

Here are some more detailed examples based on the initial response.

In essence, using the symbol ~ allows you to:

Select multiple adjacent siblings
Select multiple sibling groups within the same tag
Select multiple instances throughout 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>

On the other hand, using the symbol + allows you to:

Select exactly one adjacent sibling
Select multiple sibling groups within the same tag
Select multiple instances throughout 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>

Put simply...

+ selects one adjacent sibling
~ selects all adjacent siblings

Can you explain the significance of the "~" symbol in CSS selectors?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating custom styles using Material-UI's makeStyles function with both before and after

Is it possible to select a specific side to align with in CSS? If not, will this feature be available in the future?

Changes in content result in modifications to the size of transition elements

JavaScript bug: receiving an 'undefined' error when using getElementsByClassName

Two vertical containers dynamically adjusting their height together

Using JavaScript to dynamically alter element class in Django templates

Emojis representing flags displayed on screen

What is the reason that columns do not float in Bootstrap when there are no rows?

What is the best way to incorporate styling and structure into a jQuery plugin?

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Enhancing your images with a light box effect

Adjust the position of all content below when the specific div slides down

css using argb for opacity

Troubleshooting problem with responsive image display and blurred effects

Ways to interact with a button that toggles between states

The SVG image exceeds the boundaries of the parent column div in bootstrap

Seems like JavaScript's .active functionality is failing to function properly in my case

The CSS file fails to connect with the HTML document

coming to a halt at a specific location near the bottom

Challenges faced when using Selenium with Telerik RadMenu