May 25, 2011

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

It explains How to use different signs (+,> and ~) in CSS selector and their differences. Before starting, let us take a sample code to understand the signs.

   <div id="container">            
           <p>Child Paragraph</p>


div#container p{

It is the descendant selector. It will target all p tags within container div.

> Sign:

It will target elements which are DIRECT children of a particular element.

div#container > p {
  border: 1px solid black;

css selector

It will target all P element which are direct children of container div, not children of child div.

+ Sign:

It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

div + p {  
   color: green;  

css selector

It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.

~ Sign:

It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

div ~ p{

css selector

It will target both second and third.

Hope, you enjoyed this.

  • Hello,
    This is a really good read for me, Must admit that you are one
    of the best blogger I ever saw. Looking forward for your next one.

  • Warren

    Really useful thanks. A lot better than needless class assigning.

  • Thank you so much! Really useful

  • LovelyLines

    Clean and simple. Good job!


  • kill_windows

    Not working in IE 7/8. I do not understand. Why ?

  • Ashok Kumar

    Very Useful Post… Thanks a Lot…

  • Thanks for a great tutorial! You have really helped. The 3rd party
    software we are working with has some bad code that was producing
    duplicate DIV’s with the same ID, so we had to temporary hide
    one of the containers until there is a permanent fix. The following code
    did the trick => #social + #social {display:none;}

  • Vládik Tulkov

    coz shit happens with ie :D …

  • ramu

    Thank you it’s very useful. Really you shown the difference between them

  • very helpful thank you

  • Thank you for such useful information…

  • Sarfaraz Hussain

    very nice explanation

  • ssougnez

    Short and precise. very nice. Thanks

  • cool explanation!

  • thanks for such a clear explanation of those 3 css symbols

  • sushil kumar

    is there any sign which can be used to select both child and its sub child?

  • Nice , did not knew about 2 and 3 before.. but used 1 in routine mostly..

  • Robert

    for the + operator, I’d add that the elements are on the same level of nesting.

  • Rishikesh Agrawani

    Excellent. Helped me a lot.

  • Bhupesh Gupta

    Great. Thanks for this blog.

  • B Sikes

    Very concise. To the point. Wonderful read and highly effective writing. Thank you very much for your time and best wishes to you and your blog.

  • nickdesign


  • Zephod Beeblebrox

    Thanks for simplifying this. I was having a very difficult time in differentiating the adjacent child sibling declarations. You have cleared this up and really simplified the rest of the subjects in a cohesive and intelligible manner. Cheers, Kudos and a Chocolate Chip Cookie!!

  • Mahendra Gohil

    really good description with screensort….