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

Last update on February 14 2024 12:56:05 (UTC/GMT +8 hours)

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


Yes	Yes	Yes	Yes	Yes

Go to Exercise page