04_example.html

<!-- 4. General sibling combinator( ~ ) -->

<!DOCTYPE html>
<html>
<head>
<title>CSS BY EXAMPLES</title>
<style>
div ~ p{
  background-color: rgb(255, 1, 174);
  color: rgba(255, 255, 255, 0.75);
}
</style>
</head>
<body>

<h2>General Sibling combinator </h2>

<p>The general sibling combinator (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>sibling 1 of div</p>
<code>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, impedit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae incidunt perferendis voluptatibus. Ea odio rem deleniti voluptas repellendus veniam cumque perferendis modi aliquid? Sint aut harum, quibusdam atque quaerat officiis?</code>
<p>sibling2 of div</p>


<cong>🎉  Congratulations! you understood the concept of combinators 🎉</cong>

</body>
</html>