May 6th, 2019 
Nilesh Chaurasia CSS Child Selector
CSS Child Selector property is also used to style a direct child element. The Child Selector is represented by the symbol of greater than (>) which is placed between the two selectors.
Example 1 – CSS Child Selector Property
<!DOCTYPE html>
<html>
<head>
<style>
div > p
{
color:white;
background-color: darkcyan;
padding: 10px;
}
.header > p
{
color: white;
background-color: deeppink;
padding: 10px;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporua.</p>
</div>
<div class="header">
<p>Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua.</p>
</div>
<p>Lorem ipsum dolor sit amet, oluptate velit esse cillum dolore eu fugiat ariatur.</p>
</body>
</html>
In the above examples, we have difine that there is a p element which is inside a div element. And we apply some CSS Proprty to the p element.
In the first example, we have used a p tag inside a div tag. In the second example, we have used an h2 tag inside a class. In the third we used a p tag only.
This single p tag shows with default look and feel because we only style that p element which is inside a specified class and div tag.
Another Example of this Selector
CSS Child Selector property is also used to style a direct child element. The Child Selector is represented by the symbol of greater than (>) which is placed between the two selectors.
Example 2 – Another Example of this Property
<!DOCTYPE html>
<html>
<head>
<style>
div > h4 > span
{
color:white;
background-color: rosybrown;
padding: 10px;
}
div > p > span
{
color: white;
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div>
<h4> <span>Technology</span> </h4>
</div>
<div>
<p> <span>Technical</span> </p>
</div>
<div>
<h5> <span>Information</span> </h5>
</div>
</body>
</html>
In the above examples, we have a p and h4 elements which is inside a div element. Also, have a span tag which is written inside an h4 and p elements both.
In the first example, we have used a span tag which is inside a p tag and this p tag is inside a div tag. In the second example, we have used another span tag inside a p tag and this p tag is inside a div tag. In the third example, we used a span tag inside h5 tag and this h5 tag is inside a div tag.
In the third example, we can not apply any style so it shows the default design specification. But we apply styles to another example.
Posted in 
Tags: 
I’d need to test with you here. Which is not one thing I normally do! I take pleasure in studying a publish that can make individuals think. Also, thanks for permitting me to remark!