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:
Live Demo:
See the Pen style-scoped-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4