07-26-2023, 07:16 PM
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.
<!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.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos