snipt

Ctrl+h for KB shortcuts

CSS

Zebra Stripe a list longer than 3 items

1
2
3
li:first-child:nth-last-child(n+3) ~ li:nth-child(2n-2) {
    background-color: #00f;
}
https://snipt.net/embed/98a93c8fa7e3b2946d490aa5e98db73f/
/raw/98a93c8fa7e3b2946d490aa5e98db73f/
98a93c8fa7e3b2946d490aa5e98db73f
css
CSS
3
2019-07-16T04:48:27
True
False
False
/api/public/snipt/54819/
zebra-stripe-a-list-longer-than-3-items
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">li</span><span class="nd">:first-child:nth-last-child</span><span class="o">(</span><span class="nt">n</span><span class="o">+</span><span class="nt">3</span><span class="o">)</span> <span class="o">~</span> <span class="nt">li</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2n-2</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">background-color</span><span class="o">:</span> <span class="m">#00f</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, list, stripe, zebra