Descendant combinator

Descendant combinator is used to select the elements which are descendant of another element.

Syntax:

selector1 whitespace selector2

HTML snippet:

<div id="mystyle1">
<p>sdfsdsdfdsf</p>
<div>
This is a sample text placed as a placeholder.

This is a sample text placed as a placeholder.
 

<p>Hello world! Welcome to this tutorial page!</p>
 

This is a sample text placed as a placeholder.

This is a sample text placed as a placeholder.
</div>
</div>

CSS snippet:

#mystyle1 p{
background-color : #e1e1e1;
width : 400px;
}

Output:

Here, the style is applied to both the <p> tag in the html.

Child combinator

Child combinator is used to select the direct child of another element.

Syntax:

selector1 > selector2

HTML snippet:

<div id="mystyle1">
<p>sdfsdsdfdsf</p>
<div>
This is a sample text placed as a placeholder.

This is a sample text placed as a placeholder.

 

<p>Hello world! Welcome to this tutorial page!</p>

 

This is a sample text placed as a placeholder.

This is a sample text placed as a placeholder.
</div>
</div>

CSS snippet:

#mystyle1>p{
background-color : #e1e1e1;
width : 400px;
}

Output:

Here, the style is applied only to <p> tag which is the direct child of the <div> tag with id as “mystyle1”in the html.

Adjacent Sibling combinator

Adjacent sibling combinator is used to select an element “selector2” which is present immediately after “selector1” and shares the same parent.

Syntax:

selector1 + selector2

HTML snippet:

<div id="mystyle1">
<h1> Heading 1 </h1>
<p>the combinator “h1 + p” will select this paragraph element</p>
<div>
<p>the style won’t be applied to this element</p>
</div>
</div>

CSS snippet:

h1 + p {
background-color : #e1e1e1;
width : 400px;
}

Output:

Here, the style is applied only to the first<p> tag.

General Sibling combinator

General sibling combinator is used to select an element “selector2” which is present after “selector1” (not necessarily immediately) and shares the same parent.

Syntax:

selector1 ~ selector2

HTML snippet:

<div id="mystyle1">
<h1> Heading 1 </h1>
<h2> sample heading 2</h2>
<p> the combinator “h1 ~ p” will select this paragraph element</p>
<div>
<p>the style won’t be applied to this element</p>
</div>
<p> the combinator “h1 ~ p” will select this paragraph element</p>
</div>

CSS snippet:

h1 ~ p {
background-color : #e1e1e1;
width : 400px;
}

Output:

Here, the style is applied only to all the<p> tag which shares the same parent as of <h1> element.