Posted By
Bajarangi soft ,
Posted On 09-10-2020
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 select all element of specific parent.
Syntax:
Select all child elements.
element > element
syntax
.div.class, div.class > * {
// CSS Property
}
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div > p {
background-color: #f84109;
}
</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>
<!DOCTYPE html>
<html>
<head>
<title>
Child element selector
</title>
<style>
div.GFG, div.GFG > * {
background-color: #bf5709;
}
</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>