<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)";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.