title: Using CSS nth-child on nested map in React
body: <p>I built a grid using a table and a 2D array like so:</p>
  
  <pre><code>        &lt;table className = 'table'&gt;
              &lt;tbody&gt;
                {this.state.board.map((x,i)=&gt;{
                  return(
                    &lt;tr key = {i} className = {"row"}&gt;
                      {x.map((y,j) =&gt; {
                        return (
                          &lt;td key ={j} className = {"col"}&gt;
  
                          &lt;/td&gt;
                        )
                      })}
                    &lt;/tr&gt;
                  )
                })}
            &lt;/tbody&gt;
          &lt;/table&gt; 
  </code></pre>
  
  <p>Which prints a nice 8x8 grid onto the screen. I was trying to figure out a way to use the nth-child css selector to color all the odd squares one color, but I haven't been able to get anything to work thus far. I have tried <code>table tr td: nth-child(odd){background: blue;}</code> and that didn't work either. Is this something I can actually do with the way I created my grid? </p>