单独的组件Angular2中的替代div样式

Question

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:

<div *ngFor="let data of dataSet>
  <component1 [data]="data"></component1>
</div>

Rendered HTML

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

Here is what I have tried:

CSS

  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;}

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!

Answer 1

You'll need to wrap your content in a div with an ID of component1, component2, etc... and Class of component. The reason the nth-child isn't working is because it's looking for the odd ".style-this-div" in each component and not in the document.This way we target the first component class of it's kind and style the div inside.

If you can't change the structure just add the class of .component to your top level element and the css below should still work.

Let me know if you have questions.

HTML

<div id="component1" class="component">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</div>

<div id="component2" class="component">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</div>

CSS

  .component:nth-child(odd) .style-this-div {background-color: #efeeee;}
  .component:nth-child(even) .style-this-div {background-color: #fff;}

Codepen Here

Answer 2

Add a class to the component container like i did below. ANd use the "nth-child" odd and even

 .component1:nth-child(odd) .style-this-div{ background: red; } .component1:nth-child(even) .style-this-div{ background: yellow; } 

 <component1 class="component1"> <div> <div class="style-this-div"> some content </div> </div> </component1> <component1 class="component1"> <div> <div class="style-this-div"> some content </div> </div> </component1> <component1 class="component1"> <div> <div class="style-this-div"> some content </div> </div> </component1>