w3resource

HTML CSS Exercise: Adjacent sibling selectors

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/html-css-exercise/adjacent-sibling-selectors-answer.php