May 25, 2011

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

This article explains how to use different signs like space, +(plus), >(greater than) and ~(tilde) in CSS selector and their differences. Before getting started, let us take a sample code to understand the signs.

<div id="container">            
   <p>First</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>Second</p>
   <p>Third</p>      
</div>


Here is outline structure for better understanding:
css selector

Video Tutorial:

Space:

It is the descendant selector. It allows you to style all the nested child elements of a parent element, regardless of how deep they are in the hierarchy.

div#container p{
  background-color:green;
}


It will target all p tags within container div in our example.

css selector descendant

> Sign:

It is a child selector, which selects DIRECT child elements of a specified parent element.

div#container > p {
  background-color:green;
}
css selector descendant

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

+ (plus) 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 {
  background-color:green;
}
css selector sibling

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.

~ (tilde) 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{
  background-color:green;
}
css selector sibling

It will target all P elements which follows div i.e. both second and third.

In this post, we saw how the plus sign +, tilde ~, space and greater than > symbols are used as CSS selectors to target specific elements based on their relationship to other elements in the HTML structure.

Do let us know how you are using it practically?

66 comments

    1. +1 Me personally haven’t used the “+” nor “~” in my entire programming life span which is roughly 15+ years. I try to always give any node a distinctive className. Makes things easier to understand, and will not break things when you add/remove nodes in between the lines. I also don’t like confusing symbols that require me to think/understand what it does, it hurts my brain…

  1. Question: So are these symbols only for referencing the Element hierarchy and not for class/style hierarchy?

    What is the proper way to reference class/style hierarchy?

    1. * is called the star selector. It targets the entire content of the html file. In terms of CSS Specificity, it is the lowest.

      The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height.
      Reference: https://www.w3schools.com/css/css3_box-sizing.asp

    2. The * selector selects all elements.
      You could use it e.g. like:
      * {
      margin: 0;
      padding: 0;
      }
      Then you will remove default padding and margin from every element like body, p, li, etc.

    1. ‘~’ is similar to ‘+’. The difference is that with ‘+’ the second sibling (specified by the 2nd selector) has to immediately follow the first sibling (specified by the 1st selector) whereas with ‘~’ the second sibling(s) does not have to necessarily be immediately after the first sibling, therefore it matches every valid element that follows the one specified by the 1st selector so it can be more than one element.

  2. Best tutorial on internet about CSS selectors, it defines selectors in very easy way and with examples which help user to co-relate the things.

    Thank you

  3. Wow !! The best explanation, thank u man, you saved me.Untill now, i did not make difference between .parent .child and .parent>.child.

  4. I guess I’m the only one still confused that did not understand the ones with the ~ or the + and what he means by preceding when it looks like they don’t precede the one selected. I will have to actually type this all up and see it for myself maybe to really get it.

    1. top tip – make sure you indent your tags – this makes it much easier to see which elements precede another and which elements are nested.

  5. 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!!

  6. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *