w3resource

HTML5: How to specify that the styles only apply to this element's parent element and that element's child elements?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify that the 
styles only apply to this element's 
parent element and that element's 
child elements</title><!-- Title of the HTML page -->
<style><!-- Start of CSS style block -->
h1 {color:sky;} /* Define style for h1 elements to have sky color */
p {color:red;} /* Define style for p elements to have red color */
</style><!-- End of CSS style block -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<div><!-- Start of div element -->
<style scoped><!-- Start of scoped CSS style block -->
h1 {color:blue;} /* Define style for h1 elements within the scoped element to have blue color */
p {color:green;} /* Define style for p elements within the scoped element to have green color */
</style><!-- End of scoped CSS style block -->
<h1>This heading should be blue</h1><!-- Heading 1 element within the scoped element -->
<p>This paragraph should be 
green.</p><!-- Paragraph element within the scoped element -->
</div><!-- End of div element -->
<h1>This heading should be sky</h1><!-- Heading 1 element outside the scoped element -->
<p>This paragraph should be red.</p><!-- Paragraph element outside the scoped element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

  • This HTML code defines a webpage with two sections, each containing a heading and a paragraph.
  • Inside the <head> section, a global CSS style block is defined to set default styles for all <h1> and <p> elements.
  • Within the first <div> element, another CSS style block is defined with the scoped attribute, indicating that the contained styles only apply to elements within the scope of the parent element (the <div>) and its child elements.
  • Inside the scoped CSS style block, specific styles are defined for <h1> and <p> elements within the <div>, overriding the global styles.
  • As a result, the heading and paragraph within the <div> will have blue and green colors, respectively, while the heading and paragraph outside the <div> will retain the default colors specified in the global CSS style block.

Live Demo:

See the Pen style-scoped-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

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.