:nth-child(of) — interactive playground

<div class="pg">
    <h1 class="pg-title">🦓 <code>:nth-child(An+B of S)</code></h1>
    <p class="pg-sub">
      Mark a few items "out of stock" and watch two striping rules disagree. One counts every row in the DOM; the other counts only the rows still visible.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mark items out of stock</div>
      <div id="controls"></div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="none">All in stock</button>
        <button class="btn sm" data-preset="alt">Hide items 3 &amp; 5</button>
        <button class="btn sm" data-preset="random">Random out-of-stock</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Same six rows, two striping rules</div>
      <div class="lists">
        <div class="list-card">
          <h3>Old way</h3>
          <code class="rule">li:nth-child(even)</code>
          <ul class="row-list list-old" id="listOld"></ul>
        </div>
        <div class="list-card">
          <h3>Fixed</h3>
          <code class="rule">li:nth-child(even of :not(.hidden))</code>
          <ul class="row-list list-new" id="listNew"></ul>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">All six items in stock — both lists stripe the same way.</span>
      </div>
      <p class="hint">Caption: the left list counts hidden rows toward "even" and "odd"; the right one skips them entirely, so its stripe always reads as a clean pattern among what's actually on screen.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.