<div class="container">
  <h1>Main Container</h1>
  <nav>
    <ul>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
      <li>Fourth Item</li>
    </ul>
  </nav>
  <article>
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, <a href="http://codrops.com/">a link</a> consectetur adipisicing elit. Ratione, voluptate, voluptas nisi explicabo neque earum ab in est doloribus asperiores eligendi temporibus id <a href="#">another Link</a> distinctio quasi autem accusamus assumenda nesciunt facilis.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, deleniti, doloribus quasi est adipisci vel a rerum tempore eius soluta dolores beatae voluptates eaque excepturi numquam alias velit. Aliquid, sapiente.
    </p>
  </article>

  <article>
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ad, odio, optio quo molestiae fuga aliquam repellat dolore quisquam maiores earum cum ducimus ut explicabo iste facere veniam magni eos.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, sed, cum quisquam in nesciunt repellendus maxime omnis harum deserunt illum suscipit asperiores commodi nobis? Aperiam officia odio accusantium voluptatum cupiditate!
    </p>
  </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;
}

.element {
  padding: 20px;
}

article {
  padding: 1em;
  border: 1px solid #ddd;
  margin-bottom: 1em;
}

article:last-of-type {
  background-color: #eee;
  border: 1px solid #ddd;
}

li:last-of-type {
  text-decoration: underline;
}

p:last-of-type {
  font-weight: bold;
}

a:last-of-type {
  color: deepPink;
}

a:last-of-type::after {
  content: "(" attr(href) ")";
  color: deepPink;
}