The child elements of the parent element are selected using CSS property. We can use single, multiple or last-child elements. The child selector can help to get all child elements of the required parent element. There are three types of child elements selected from CSS. All child elements, nth child elements, and only child elements can be used with CSS properties. We can see the CSS child element with the syntax and examples.
Syntax
The CSS child selector syntax is demonstrated below.
<style>
Element > child_element {
property: value;
}
</style>
Examples
The provided illustrations demonstrate the full range of elements contained within the parent's elements. Utilizing CSS styling, we can enhance the appearance of the child elements.
Example 1:
The demonstration illustrates the fundamental CSS attribute for the child selector. Modifying the font size, background color, or other elementary designs is possible.
<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:250px;
}
div > p {
background-color: black;
color : white;
}
section > p {
background-color: aqua;
font-size : 12px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>
Output
The output shows all basic child elements.
Example 2:
The illustration demonstrates the fundamental CSS attribute for the child selector. Modifications can be made to attributes such as font size, border, background color, and other basic design elements. The parent and child elements can share identical HTML tags.
<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:260px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
div > div {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
div > section {
background-color: white;
font-size : 14px;
color : red;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>
Output
The output shows basic child elements.
Example 3:
The illustration demonstrates the fundamental CSS attribute for the descendant selector. Implementing the hover effect is possible for the descendant selector of the specified element. The parent and child elements can be comprised of either identical or varied HTML tags.
<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:280px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
div > div {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
div > section {
background-color: white;
font-size : 14px;
color : red;
}
/* Show all child elements with hover effect */
div > div:hover {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width:80%;
margin-left:15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector with hover effect </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>
Output
The result displays all nested elements with a hover animation.
Example 4:
The illustration demonstrates the fundamental CSS attribute for the descendant selector. A straightforward layout and hover animation can be applied to the descendant selector of the element with class and id identifiers.
<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:250px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
.card > .value1 {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
.main_div > .card {
background-color: white;
font-size : 14px;
color : red;
}
/* Show all child elements with hover effect */
.card > .value1:hover {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width:80%;
margin-left:15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector with Tags </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<section class = "card">
<p class = "value1"> Paragraph 1 shows the information </p>
<center class = "value2">
<!-- not Child element but Descendant element -->
<p class = "value1"> Paragraph 2 shows the information (section element). </p>
</center>
<b class = "value1"> Bold tag shows the information. </b> <br>
<i class = "value1"> Italic tag shows the information. </i>
</section>
</div>
</body>
</html>
Output
The result displays all descendant elements with a hover animation.
Conclusion
The CSS child selector targets and styles every child element within a parent element. It enables sophisticated styling with HTML tags.