<li><a href="#">Home</a></li>
    <li><a href="#how-it-works">How it works</a></li>
    <li><a href="#drawbacks">Drawbacks</a>
    <li><a href="#creator">Creator</a></li>

  <div id="how-it-works" class="page">
    <h1>How it works</h1>
    <p>The :target selector matches the current URL hash. You're not technically navigating, but it gets you like 90% of the way there.</p>
  <div id="creator" class="page">
    <h1>Created by...</h1>
  <div id="drawbacks" class="page">
    <p>The main drawback here is that the 'default' page--that is, the page that shows when <em>no</em> hash exists in the URL--must come last in the markup.</p>
    <p>This is because the CSS that handles the fallback markup depends on the <code>:last-child</code> selector.</p>
  <div id="#" class="page">
    <h1>The :target selector</h1>
    <p>Using the target selector, we can perform quasi-page navigation.</p>
main > .page:target ~ .page:last-child,
main > .page {
    display: none;

/* :last-child works, but .page:last-child will not */
main > :last-child,
main > .page:target {
    display: block;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.