What does the css selectors ~, +, > do?

Question

What do the CSS selectors ~, +, and > do?

I have seen these selectors many times, but it is not clear what the main difference between them is. Can someone explain the difference between these symbols? When we should use these symbols?

possible duplicate of [What does the "+" (plus sign) CSS selector mean?](http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean), [CSS '>' selector; what is it?](http://stackoverflow.com/questions/4459821/css-selector-what-is-it?rq=1) — MarcinJuraszek, Jan 13 '15 at 05:53

score 9 · Answer 1 · answered Jan 13 '15 at 05:56

Those are called combinators, discussed in the spec.

~ is the general sibling combinator. a ~ b selects b elements that are preceded (not necessarily immediately) by an a element.

+ is the adjacent sibling combinator. a + b selects b elements immediately preceded by an a element.

> is the child combinator. a > b selects b elements that are immediate children of an a element.

score 0 · Answer 2 · answered Jan 13 '15 at 05:53

you can read this article which is having full information about css3 selector that you are searching for : http://www.codeproject.com/Articles/703826/CSS-Selector

article also having demo link where you can go and check what this selector is doing

HtmlElement ~ HtmlElemnt - Select all the html element which are precedes html element.
CSS

div ~ p
{
  font:15px arial,sans-serif;
  color:red;
}
Use

<div >
<p>My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>

in this example p element which is precedes div get highlighted with read color, in this example "I am working as Soft Engg." and "My Demo Page." text get highlighted.

HtmlElement > HtmlElemnt - Select all the html element which are child of html element. 
CSS

div > p
{
  font:15px arial,sans-serif;
  color:red;
}
Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

in this example all p element which are child of div get highlighted with read color, but p element which are not child of div doesnt get affected.

HtmlElement + HtmlElemnt - Select all the html element which are immediate after html element. 
CSS

div + p
{
  font:15px arial,sans-serif;
  color:red;
}
Use

<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>

in this example p element which is immediate after div get highlighted with read color, in this example "I am working as Soft Engg." this text get highlighted.

What does the css selectors ~, +, > do?

2 Answers2