<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Combinators example</title>
    <style>

      section p {
        color: blue;
      }

      section > p {
        background-color: yellow;
      }

      h2 + p {
        text-transform: uppercase;
      }

      h2 ~ p {
        border: 1px dashed black;
      }

    </style>
  </head>
  <body>
    <section>
      <h2>Heading 1</h2>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <div>
        <h2>Heading 2</h2>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
      </div>
    </section>
  </body>
</html>
