<nav>
  <ul>
    <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>
  </ul>
</nav>

<main>
  <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>
  
  <div id="creator" class="page">
    <h1>Created by...</h1>
    <p>Charles.</p>
  </div>
  
  <div id="drawbacks" class="page">
    <h1>Drawbacks</h1>
    <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>
  
  
  <div id="#" class="page">
    <h1>The :target selector</h1>
    <p>Using the target selector, we can perform quasi-page navigation.</p>
  </div>
</main>

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