CSS Child Selector

Ad Banner Image

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.

CSS Child Selector
Fig.1- CSS Child Selector
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.

Child Selector Example
Fig.2 – Child Selector Example
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress