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/
https://snipt.net/raw/98a93c8fa7e3b2946d490aa5e98db73f/
98a93c8fa7e3b2946d490aa5e98db73f
css
CSS
3
2016-09-22T12:09:46
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 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="k">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

Text only

twig zebra

<li class="{{ cycle(['even','odd'],loop.index) }}">
https://snipt.net/embed/110f51fc6f3ab4072625205c51b383c3/
https://snipt.net/raw/110f51fc6f3ab4072625205c51b383c3/
110f51fc6f3ab4072625205c51b383c3
text
Text only
1
2016-09-25T00:20:09
True
False
False
Oct 25, 2012 at 05:59 PM
/api/public/snipt/49065/
twig-zebra
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a>&lt;li class=&quot;{{ cycle([&#39;even&#39;,&#39;odd&#39;],loop.index) }}&quot;&gt; </span></pre></div> </td></tr></table>
even, odd, symfony2, twig, zebra

JavaScript

Odd/Even rows with jQuery

$('div:odd').css('background-color', 'red');
https://snipt.net/embed/158517e172144a626028a556b268bb2a/
https://snipt.net/raw/158517e172144a626028a556b268bb2a/
158517e172144a626028a556b268bb2a
js
JavaScript
2
2016-09-24T05:57:12
True
False
False
Jun 17, 2013 at 02:59 AM
/api/public/snipt/42260/
odd-even-rows-with-jquery
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;div:odd&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;background-color&#39;</span><span class="p">,</span> <span class="s1">&#39;red&#39;</span><span class="p">);</span> </span></pre></div> </td></tr></table>
jquery, odd/even, rows, zebra

PHP

odd/even rows with php

1
2
3
4
5
6
<ul>
    <?php foreach ($items as $item) :?>
		<li class="<?php print $oddeven ? 'odd' : 'even'; $oddeven = !$oddeven; ?>">			
		</li>
    <?php endforeach; ?>
</ul>
https://snipt.net/embed/902c4cb3e029ac931d5452ce08665dd7/
https://snipt.net/raw/902c4cb3e029ac931d5452ce08665dd7/
902c4cb3e029ac931d5452ce08665dd7
php
PHP
6
2016-09-18T08:09:55
True
False
False
/api/public/snipt/42259/
oddeven-rows-with-php
<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> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="x">&lt;ul&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="x"> </span><span class="cp">&lt;?php</span> <span class="k">foreach</span> <span class="p">(</span><span class="nv">$items</span> <span class="k">as</span> <span class="nv">$item</span><span class="p">)</span> <span class="o">:</span><span class="cp">?&gt;</span><span class="x"></span> </span><span id="L-3"><a name="L-3"></a><span class="x"> &lt;li class=&quot;</span><span class="cp">&lt;?php</span> <span class="k">print</span> <span class="nv">$oddeven</span> <span class="o">?</span> <span class="s1">&#39;odd&#39;</span> <span class="o">:</span> <span class="s1">&#39;even&#39;</span><span class="p">;</span> <span class="nv">$oddeven</span> <span class="o">=</span> <span class="o">!</span><span class="nv">$oddeven</span><span class="p">;</span> <span class="cp">?&gt;</span><span class="x">&quot;&gt; </span> </span><span id="L-4"><a name="L-4"></a><span class="x"> &lt;/li&gt;</span> </span><span id="L-5"><a name="L-5"></a><span class="x"> </span><span class="cp">&lt;?php</span> <span class="k">endforeach</span><span class="p">;</span> <span class="cp">?&gt;</span><span class="x"></span> </span><span id="L-6"><a name="L-6"></a><span class="x">&lt;/ul&gt;</span> </span></pre></div> </td></tr></table>
odd/even, php, rows, zebra

JavaScript

jquery zebra table striping

1
2
3
4
// ===================
// jquery zebra table odd striping

$("tr:nth-child(odd)").addClass("odd");
https://snipt.net/embed/ca663f768a7e8e6ddcb23f5b5cc44935/
https://snipt.net/raw/ca663f768a7e8e6ddcb23f5b5cc44935/
ca663f768a7e8e6ddcb23f5b5cc44935
js
JavaScript
4
2016-09-25T08:27:15
True
False
False
/api/public/snipt/8202/
jquery-zebra-table-striping
<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> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="c1">// ===================</span> </span><span id="L-2"><a name="L-2"></a><span class="c1">// jquery zebra table odd striping</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;tr:nth-child(odd)&quot;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;odd&quot;</span><span class="p">);</span> </span></pre></div> </td></tr></table>
jquery, striping, tables, zebra
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.