What does "~" do in CSS?

December 12, 2021

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?

>Solution :

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 .