HTML CSS Exercise: Descendant selector

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

Solution:

HTML Code:

<!DOCTYPE HTML><!-- Document type declaration -->
<html lang="en"><!-- Opening HTML tag with language attribute set to English -->
<head><!-- Head section containing metadata -->
<meta charset=utf-8><!-- Character encoding declaration -->
<title>CSS Descendant selectors example</title><!-- Title of the HTML document -->
<style type="text/css"> /* Opening style tag for CSS with type attribute */
p span{ /* Descendant selector targeting <span> elements within <p> elements */
color:#4b6c9c; /* Set color of <span> elements */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<p>Only run of <span>text within span</span> will be of different color</p><!-- Paragraph element with <span> element inside -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document declares the document type and specifies the language as English.
Character encoding is set to UTF-8 to support a wide range of characters.
CSS is used to style the elements that are descendants of elements.
The style rule sets the color of such elements to a specific shade of blue.
The element in the body of the document contains text content, with a element inside it. The text within the element will be displayed in the specified color.

Live Demo:

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

Supported browser


Yes	Yes	Yes	Yes	Yes