HTML CSS Exercise: Adjacent sibling selectors

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<title>HTML CSS Exercises - Adjacent sibling selectors</title><!-- Title of the HTML document -->
<style type="text/css"> /* Opening style tag for CSS with type attribute */
h2 + h3 { /* Adjacent sibling selector targeting h3 elements that directly follow h2 elements */
border-bottom:1px solid silver; /* Add a bottom border to selected h3 elements */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<h2>This is heading Two </h2><!-- h2 element with text content -->
<h3>This is heading Three </h3><!-- h3 element with text content -->
<p>This is a paragraph</p><!-- Paragraph element -->
<h3>This is heading Three again</h3><!-- h3 element with text content -->
<p>This is a paragraph again</p><!-- Paragraph element -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document contains several heading and paragraph elements.
CSS is used to apply styles to specific elements using adjacent sibling selectors.
h2 + h3 selects h3 elements that directly follow h2 elements.
The selected h3 elements are styled with a bottom border to visually separate them from the preceding h2 elements.
The comments in the HTML code indicate the purpose of each element.

Live Demo :

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

Supported browser


Yes	Yes	Yes	Yes	Yes