<div class="no-support">
  <p>Heads up: As of 06/19, <code>:nth-child(an + b of s)</code> only works in Safari. Check the <a href="https://css-tricks.com/almanac/selectors/n/nth-child/">CSS-Tricks Almanac for the latest we know!</a></p>
</div>

<div class="one">
  <ul>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
    <li>child</li>  
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
  </ul>
  <i>select the first 3 children matching <code>.pickme</code></i>
</div>

<div class="one-counterexample">
  <ul>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
    <li>child</li>  
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
  </ul>
  <i>selects <code>.pickme</code> elements only if they're also within the first 3 children</i>
</div>

<div class="two">
  <ul>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
    <li>child</li>  
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
  </ul>
  <i>select the odd-numbered children only considering those matching <code>.pickme</code></i>
</div>

<div class="two-counterexample">
  <ul>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li>child</li>
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
    <li>child</li>  
    <li class="pickme">.pickme</li>
    <li class="pickme">.pickme</li>
  </ul>
  <i>selects <code>.pickme</code> elements only if they're also odd children</i>
</div>

.no-support {

  padding: 5px;
  width: auto;
  font-size: 12px;
  float: none;
}

body {
  padding: 1em 2em;
}

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 3em;
  margin-bottom: 3em;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one :nth-child(-n + 3 of .pickme) {
  background: lightsteelblue;
}

.one-counterexample .pickme:nth-child(-n + 3) {
  background: lightsteelblue;
}

.two {
  clear: left;
}

.two :nth-child(odd of .pickme) {
  background: lightsteelblue;
}
.two-counterexample .pickme:nth-child(odd) {
  background: lightsteelblue;
}

div:before {
  font-family: monospace;
  white-space: nowrap;
  font-size: 12px;
}

.one:before {
  content: ":nth-child(-n+3 of .pickme)";
}
.one-counterexample:before {
  content: ".pickme:nth-child(-n+3)";
}
.two:before {
  content: ":nth-child(odd of .pickme)";
}
.two-counterexample:before {
  content: ".pickme:nth-child(odd)";
}