title: Using nth-child css on dynamic React table
body: <p>I'm having trouble getting the <code>nth-child</code> or <code>nth-of-type</code> selectors to take effect in a list of divs.</p>
  
  <p>I'm working in a React app and have a component representing a single item in a collection that renders the following HTML structure:</p>
  
  <pre><code>&lt;div className="link-row"&gt;
    &lt;div className="link-row-header-container"&gt;
      &lt;div className="header-name"&gt;&lt;/div&gt;
      &lt;div className="header-info"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div className="link-container"&gt;
      &lt;div className="left-inner-container"&gt; //this is the container i'm trying to select  
      &lt;/div&gt;
      &lt;div className="right-inner-container"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div className="link-row-footer-container"&gt;
      &lt;span&gt; footer stuff &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a function in an outer component mapping the above component over a collection of data and placing them in a single <code>&lt;div&gt;</code> like so:</p>
  
  <pre><code>&lt;div&gt; {linkList} &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to alternate the background color of "left-inner-container" in sequences of threes, but I'm consistently getting only a single color across all of them.</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.left-inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #450037;
  }
  
  .left-inner-container:nth-of-type(3n+1) {background-color: #ff5e39;}
  .left-inner-container:nth-of-type(3n+2) {background-color: #00d2d1;}
  .left-inner-container:nth-of-type(3n+3) {background-color: #ffffff;}
  </code></pre>