Home » Tutorials » HTML5/CSS3 » Understanding ‘~’, ‘+’ and ‘>’ CSS Selectors

Understanding ‘~’, ‘+’ and ‘>’ CSS Selectors

understanding CSS SElectors

In this tutorial I will explain the basic usage of CSS Selectors and more specifically for using the ~,+ and >. To make it easier to understand, let’s first take a look at the following HTML code:

<div id="container">
   <p>1st paragraph</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>2nd paragraph</p>
   <p>3rd paragraph</p>
</div>

Blank space between elements:

div#container p{
 color:red;
}

It is the descendant selector. Selects all <p> elements inside the <div> with id “container”.

Advertisement

~ Selector:

Selects all elements that are preceded by the former selector.

div~p{
background-color:green;
} 

In this case selects every <p> element that is preceded by a div.

using the ~ selector

+ Selector:

It is Adjacent sibling combinator. Selects the <p> elements that are placed Immediately after <div> elements.

div+p {
color: green;
}

In this example, it will target to 2nd paragraph only, because the owner <p> element comes just after div tag.

using the + selector

> Selector:

Selects all <p> elements that are direct children of a particular element.

div#container>p {
  color: green;
}

It will target all <p> elements which are direct children of a container div, not children of Child div.

using the css selectors

In this tutorial I will explain the basic usage of CSS Selectors and more specifically for using the ~,+ and &gt;. To make it easier to understand, let's first take a look at the following HTML code: &hellip;

Review Overview

0%

User Rating: 3.02 ( 5 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

a piece of css code

Margin 0 auto is not working

Very common problem nowadays is how to actually make margin: 0 auto; to work. You ...

Leave a Reply

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


Loading Facebook Comments ...