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

Hire a programmer

Popular posts from this blog

CSS selector

C program to convert decimal to binary number

C Program to convert binary to decimal number