<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;
}