w3resource

HTML CSS Exercise - Adjacent sibling selectors

HTML CSS Exercise - 33

In this exercise you will use CSS Adjacent sibling selectors.

Though the solution provided uses ul and ol element, you may use any element of your choice.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML CSS Exercises - Adjacent sibling selectors</title>
</head>
<body>
<h2>This is heading Two </h2>
<h3>This is heading Three </h3>
<p>This is a paragraph</p>
<h3>This is heading Three again</h3>
<p>This is a paragraph again</p>
</body>
</html>

CSS Code:

h2 + h3 {
border-bottom:1px solid silver
}

Use the following editor to complete the exercise.

See the solution in the browser

See the Pen html css common editor by w3resource (@w3resource) on CodePen.


Previous: CSS Child selector.
Next: Style placeholder text.

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://www.w3resource.com/html-css-exercise/adjacent-sibling-selectors.php