What is Tilde in CSS?

In CSS, the tilde symbol (~) represents the subsequent-sibling combinator, a powerful selector used to target specific elements within your HTML document. It's designed to select all instances of a second element that follow a first element within the same parent, regardless of whether they are immediately next to each other.

The tilde combinator is particularly useful for applying styles based on the position and relationship of elements that share the same parent, offering more flexibility than the adjacent sibling combinator (+).

How the Subsequent-Sibling Combinator Works

The ~ combinator works by separating two selectors, A and B, in the form A ~ B. It then matches all B elements that meet the following conditions:

They share the same parent element as A.
They appear after A in the document's source order.

Crucially, B does not have to be an immediate sibling of A; any subsequent sibling will be selected.

Syntax

The basic syntax for using the tilde combinator is straightforward:

selector1 ~ selector2 {
  /* CSS properties to apply */
}

Here:

selector1 is the reference element.
selector2 is the element(s) that will be styled.

Practical Examples and Use Cases

Let's explore some common scenarios where the tilde combinator shines.

Example 1: Styling All Following Paragraphs

Consider an HTML structure where you want to style all paragraphs that come after a heading within the same container.

HTML:

<div class="content-block">
  <h2>Section Title</h2>
  <p>This is the first paragraph.</p>
  <span>Some unrelated text.</span>
  <p>This is the second paragraph.</p>
  <div>Another element.</div>
  <p>This is the third paragraph.</p>
</div>

CSS:

h2 ~ p {
  background-color: #e0f7fa; /* Light blue background */
  padding: 8px;
  border-left: 3px solid #00bcd4;
}

Result:
In this example, both "This is the second paragraph." and "This is the third paragraph." will get the light blue background and left border. The first paragraph after the h2 will also be styled. The <span> and <div> elements in between do not prevent the subsequent paragraphs from being selected.

Example 2: Dynamic Form Styling with Checkboxes

A popular use case for the tilde combinator is styling form elements or their labels based on the state of a checkbox or radio button, without using JavaScript.

HTML:

<label for="toggle-info">Show more information</label>
<input type="checkbox" id="toggle-info">
<div class="extra-info">
  <p>This is some additional content that will be revealed.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

CSS:

.extra-info {
  display: none; /* Hide by default */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

input[type="checkbox"]:checked ~ .extra-info {
  display: block; /* Show when checkbox is checked */
  opacity: 1;
  max-height: 200px; /* Adjust as needed */
}

Result:
When the checkbox with id="toggle-info" is checked, the div with the class extra-info will become visible because it is a subsequent sibling of the checked input.

Tilde vs. Plus Combinator

It's important to differentiate the tilde (~) from the adjacent sibling combinator (+).

A ~ B (Tilde): Selects all B elements that follow A and share the same parent, regardless of what's in between.
A + B (Plus): Selects only the B element that immediately follows A and shares the same parent.

For more in-depth information on CSS combinators, you can refer to the MDN Web Docs on combinators.

Benefits of Using the Tilde Combinator

Flexibility: Allows styling based on sibling relationships without strict adjacency.
Semantic HTML: Encourages writing more semantic and structured HTML by allowing CSS to handle complex layout relationships.
Pure CSS Solutions: Enables dynamic visual effects and content toggling without JavaScript, enhancing performance and accessibility for basic interactions.
Maintainability: Centralizes styling logic in CSS, making it easier to manage and update.

By understanding and utilizing the subsequent-sibling combinator, you can create more robust, dynamic, and maintainable CSS layouts.