HTML CSS Exercise: Descendant selector


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 -->


  • 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 <span> elements that are descendants of <p> elements.
  • The style rule sets the color of such <span> elements to a specific shade of blue.
  • The <p> element in the body of the document contains text content, with a <span> element inside it. The text within the <span> element will be displayed in the specified color.

Live Demo:

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

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.