<div class="container">
  <article>
    <h1>Understanding :last-child</h1>
    <p>
      This is the first paragraph.
    </p>
    <p>
      This is the second paragraph, there are no paragraphs after it, but it is not the last child of its parent. <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:last-child {
  color: grey;
}

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

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

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

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