<h2>Selecting Ranges of Elements with CSS</h2>

<ol class="ol">
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
    <li>List item example</li>
  </ol>

<p>The selector <code>li:nth-child(n+7):nth-child(-n+14)</code> selects all items from 7 to 14, inclusive.<br>(Note that the selectors are reversed in the code to overcome a bug in Safari)</p>
<p class="p">Credit: <a href="http://bittersmann.de/samples/08-15">Gunnar Bittersman</a>. Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  padding: 0 20px;
  text-align: center;
  line-height: 1.3;
}

ol {
  max-width: 185px;
  margin: auto;
}

.ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}