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.
Comments
Post a Comment