A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”. It is also known as element > element selector. It selects all element of a specific parent.
Syntax:
Example 1: This example selects all the child element.
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div > p {
background-color: green;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<span>
<p>Paragraph 3</p>
</span>
</div>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</body>
</html>
|
Output:
Example 2: This example selects all the child elements recursively.
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div.GFG > * {
background-color: green;
}
</style>
</head>
<body>
<div class="GFG">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<span>
<p>Paragraph 3</p>
</span>
</div>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</body>
</html>
|
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.