<div class="container">
  <article>
    <h1>Understanding :first-child</h1>
    <p>
      This is the first paragraph, but it's not the first child of its parent.
    </p>
    <p>
      This is another paragraph. <span>This is a span inside the paragraph.</span>
    </p>
    <ul>
      <li>First list item</li>
      <li>Second list item</li>
      <li>Third list item</li>
    </ul>
  </article>
</div>
body {
  color: #555;
  font-size: 1.2em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

span:first-child {
  color: grey;
}

li:first-child {
  text-decoration: underline;
  color: deepPink;
}

p:first-child {
  font-size: 1.5em;
}

span:first-child::before {
  content: "(";
  color: deepPink;
}

span:first-child::after {
  content: ")";
  color: deepPink;
}