the MMM blog

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

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


There are a few signs are very useful in CSS selector. This post helps you understand how they work. Let's use the following example:

<div id="div1">           
   <p>Para1</p>
   <div id="div2">
       <p>Para2</p>
   </div>
   <p>Para3</p>
   <p>Para4</p>     
</div>

 

Space

It selects all descendant within the element.

#div1 p{background-color:#ffff66}
<div id="div1">           
   <p>Para1</p>
   <div id="div2">
       <p>Para2</p>
   </div>
   <p>Para3</p>
   <p>Para4</p>     
</div>

 

> Sign

It selects direct children of the element. 

#div1>p{background-color:#ffff66}
<div id="div1">           
   <p>Para1</p>
   <div id="div2">
       <p>Para2</p>
   </div>
   <p>Para3</p>
   <p>Para4</p>     
</div>

 

+ Sign

It selects the first element that is immediately preceded by the former selector. 

div+p{background-color:#ffff66}
<div id="div1">           
   <p>Para1</p>
   <div id="div2">
       <p>Para2</p>
   </div>
   <p>Para3</p>
   <p>Para4</p>     
</div>

 

~ Sign

It selects the first element and all siblings that is preceded by the former selector. 

div~p{background-color:#ffff66}
<div id="div1">           
   <p>Para1</p>
   <div id="div2">
       <p>Para2</p>
   </div>
   <p>Para3</p>
   <p>Para4</p>     
</div>

"If opportunity doesn't knock, build a door"

Contact me!

Have questions? Feel free to use the form or send me an email with any questions.

I will be responsive to your requests and your questions.