title: CSS(SCSS?) selector used to create zebra background for table
body: <p>I am new to coding and I have been having some trouble creating a zebra background for a table...where no matter how I select the elements with CSS, nothing would show up.</p>
  
  <p>the target code looks something like this:</p>
  
  <pre><code>&lt;table class="striped"&gt;
    &lt;tr&gt;
      &lt;td class="main"&gt;
        Test Submit
      &lt;/td&gt;
      &lt;td&gt;
        &lt;button&gt;Submit&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>where the  block (from  to ) repeats a few more times, thus creating a table.</p>
  
  <p>And below is the CSS code I attempted to create the zebra background:</p>
  
  <pre><code>table.striped {
    tbody tr:nth-child(even){ background: red;}
  }
  </code></pre>
  
  <p>I have searched online for answers and many seem to be sharing the same code as I have written (or something similar)...but mine has nothing showing up. </p>
  
  <p>Did I mistaken how the selectors work in css? That the selector (tbody tr:nth-child(even)) does not target all the even numbered  as I had hoped?</p>
  
  <p>And is there a good-way to debug css related question? 
  console.log doesn't return a very meaningful message most of the time.</p>
  
  <p>Your assistance is much appreciated!</p>
  
  <p>PS. I have found some answers that did the trick in jQuery...but I am sure CSS can do it as well?</p>