title: Alternate div styles within separate components Angular2
body: <p>I'm trying to apply a striped look to a few divs. My structure is below. Each component is a new instance that is being rendered in an ngFor loop, like this:</p>
  
  <pre><code>&lt;div *ngFor="let data of dataSet&gt;
    &lt;component1 [data]="data"&gt;&lt;/component1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Rendered HTML</p>
  
  <pre><code>&lt;component1&gt;
    &lt;div&gt;
      &lt;div class="style-this-div"&gt;
        some content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/component1&gt;
  
  &lt;component1&gt;
    &lt;div&gt;
      &lt;div class="style-this-div"&gt;
        some content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/component1&gt;
  
  &lt;component1&gt;
    &lt;div&gt;
      &lt;div class="style-this-div"&gt;
        some content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/component1&gt;
  </code></pre>
  
  <p>Here is what I have tried:</p>
  
  <p>CSS</p>
  
  <pre><code>  div[class^="style-this-div"]:nth-of-type(odd) {background-color: #efeeee;}
    div[class^="style-this-div"]:nth-of-type(even) {background-color: #efeeee;}
  
    .style-this-div:nth-child(odd) {background-color: #efeeee;}
    .style-this-div:nth-child(even) {background-color: #efeeee;}
  </code></pre>
  
  <p>When I use the odd selectors, the gray background color is applied to all of them. I'm trying to get them to alternate colors. What can I do? Thanks!</p>