Difference between "+" and "~"

Question

What is the main difference between $('div + p') and $('div ~ p').

If i have something like this

<div class="active"></div>
<p class="pactive"></p>

Returning the same value.

Answer 1

I found the answer.

<div class="active"></div>
<p class="pactive"></p>
<div></div>
<p></p>
<div></div>
<p></p>
<div></div>

$("div.active + p") will only select the p with class pactive(ie. p next to the div, same as $(div).next();)

Result:

<p class="pactive"></p>

where as $("div.active ~ p") will select all the sibling ps which will come after the div.active only.If any p element is there before div.active it wont select that p.

Result:

<p class="pactive"></p>
<p></p>
<p></p>

Answer 2

X + Y

ul + p {
   color: red;
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

X ~ Y

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

For Reference

Answer 3

Take an example

div + p

Selects all <p> elements that are placed immediately after <div> elements

p ~ ul

Selects every <ul> element that are preceded by a <p> element and have the same parent element.

Check out the CSS REFERENCE Selectors