+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Child selectors in CSS3 (/showthread.php?tid=5175)
Child selectors in CSS3 - Qomplainerz - 07-26-2023
Example:
<!DOCTYPE html>
<html>
<head>
<title>Child Selectors Example</title>
<style>
/* Select only the direct children of the unordered list (ul) */
ul > li {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>This is a direct child of ul and will be blue.</li>
<li>
This is a nested list within li.
<ul>
<li>This is a child of the nested ul and will not be blue.</li>
</ul>
</li>
</ul>
</body>
</html>
Explanation:
Child selectors (>) target only the direct children of a parent element. In this example, the ul > li selector selects all li elements that are direct children of the unordered list (ul) and applies a blue color to their text. The nested li inside the second li will not be affected.