HTML CSS Exercise: Child selector

Last update on March 04 2024 06:50:39 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<title>CSS Child selector</title><!-- Title of the HTML document -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<ul><!-- Unordered list -->
<li>My color will be changed</li><!-- List item -->
<li>My color will be changed</li><!-- List item -->
<ol><!-- Ordered list (nested) -->
<li>My color will not be changed</li><!-- List item -->
<li>My color will not be changed</li><!-- List item -->
</ol><!-- Closing ordered list -->
<li>My color will be changed</li><!-- List item -->
</ul><!-- Closing unordered list -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document contains a list structure with nested lists.
The outer <ul> element represents an unordered list.
Inside the <ul>, there are several <li> elements, representing list items.
One of the list items contains an <ol> element, representing an ordered list.
Inside the nested <ol>, there are additional <li> elements representing list items.
The structure demonstrates the use of child selectors in CSS to target specific elements within the list structure.

Live Demo:

See the Pen child-selectors-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes