CSS combinators

 Likewise simple selectors in CSS, we can also combine more than one simple selector is called CSS combinators.

There are four types of CSS combinators in the CSS.

  • Descendant selector(space)

  • Child selector(>)

  • Adjacent sibling selectors(+)

  • General sibling selectors(~)

Descendant selectors(space)

By name, the descendant selectors select all the descendant elements of the specific element. Actually, this is used in the nested elements.

Example:

div p{

Color: red;

}

Change the color of all <p> in the div section

<div>

<p>programgrab</p>

<p>programgrab</p>

</div>


Child selectors(>)

This selects all the child element of the specific element


Example:

div > p{

Color: red;

}

<div>

<p>programgrab</p>

<p>programgrab</p>

<div class=”header”>

<p>programgrab</p>

</div>

</div>


Change the color of all children <p> in the div section and not the second div section.


Adjacent sibling selectors(+)

The adjacent sibling selects the following element of a specific element.

Example:

div+p{

color:red;

font-weight:bold;

}

<div>

<p>programgrab</p>

<p>programgrab</p>

</div>

Change the color of adjacent <p>element after div element.

General sibling selectors(~)

The adjacent sibling selects all the following elements of a specific element.

Example:

div~p{

color:red;

font-weight:bold;

}


<div>

<p>programgrab</p>

<p>programgrab</p>

</div>

Change the color of all the <p>elements after div element.



If you have any confusion about the above topic, you can comment your query and subscribe to this programming blog.

Comments

Popular posts from this blog

CSS selector

how to cout in cpp

C Program to convert binary to decimal number