-2

I've seen everything on the internet about the "~" sign in CSS but I understood nothing. So, can anyone explain in simple words, what does the "~" sign do in CSS?

Muhammad Ali
  • 196
  • 1
  • 10
  • Without more detail about what you've seen and why you're confused, there's a high chance the answers here will repeat what you've already read. – IMSoP Dec 12 '21 at 19:14
  • Think of the first selector as a bucket, then the second selector, presented after the tilde, as the selector you want. So in H1 ~ p you select all paragraphs() in Heading 1 (H1), including the H1. – Josh Adams Dec 12 '21 at 19:14
  • @JoshAdams That sounds like plain `h1 p` rather than `h1 ~ p` – IMSoP Dec 12 '21 at 19:15
  • You could also just look up any "CSS selector" documentation like https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors and there you will find the [General sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) – caramba Dec 12 '21 at 19:17

1 Answers1

2

This is referred to as an general selector. This selector is similar to the ‘Adjacent Selector’ (+ sign), however, it is less strict. While an adjacent selector will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select any

elements, as long as they follow a , as in the example below.

h4 ~ p {
   background-color: green;
}

<h4>General Selector Example</h4>
<p>Paragraph number one should now have a green background.</p>
<p>Paragraph number two will also have a green background.</p>
<p>Paragraph number three will also have a green background.</p>

So with this selector, as mentioned very similar to the adjacent selector, will select every

element that follows the .

Esmaeli
  • 111
  • 6