Good day! Understanding Angular 2, it was necessary to display a list of items on the user's screen.

<campaigns> <campaign *ngFor="let campaign of campaigns"></campaign> </campaigns>

And it is necessary that each non-even element changes its color from white to gray.
Previously, with simple layout, I used the pseudo-class: nth-of-type (odd). Who himself made every odd element I need colors (for example). But for components this is for some reason not working.
I can certainly do:

 <campaigns> <campaign *ngFor="let campaign of campaigns; let i = index" [background]="i % 2 == 0 'green':'white'"></campaign> </campaigns>

But it seems to me that this approach is a crutch.
In this connection, the question is how to transfer information from the css parent container inside the component.

Css campaigns code

 campaign:nth-of-type(odd) { background: #f2f2f2; }

Сss and html campaign code

 <div class="campaign"> <div class="inlineBlock videoContainer"> <video width="100%" controls="controls" preload="metadata"> <source src="http://a-media.pro/videos/1479360662.mp4"> </video> </div> <div class="inlineBlock leftContainer"> <a class="campaignName text-top" [routerLink]="['/campaigns', campaign.id]">{{campaign.name}}</a><br/> Показов по плану - {{campaign.countShow}}<br/> Комплексов - {{campaign.countDevice}} <div class="bottom">Тип проката <span class="text-bottom">«{{campaign.methodName}}»</span></div> </div> <img src="/images/line.png" class="inlineBlock" style="margin-top: 8px"> <div class="inlineBlock rightContainer"> <div class="text-top"> {{campaign.budget}} р. </div> c {{campaign.start | date: 'dd.My' }}<br/> до {{campaign.end | date: 'dd.My' }} <div class="bottom right"><span class="text-bottom">{{campaign.statusName}}</span></div> </div> 

 .campaign { width: 100%; height: 190px; padding: 17px 0; color: #000000; font-size: 16px; font-family: "Segoe UI", sans-serif; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
  • Make a minimal reproducible example so that you can see what and why it does not work for you - Grundy
  • Not correctly issued the question code disappeared. Just rules) - Vyacheslav
  • But for components this is for some reason not working. - why do you think that does not work? how did you try? What styles did you use? how did you use? What are your components? - Grundy
  • A minimal reproducible example implies a minimal code that you can run and see the problem. - Grundy
  • It does not work because the color is always white, not gray (on even-numbered elements). Now add more container markup - Vyacheslav

1 answer 1

Understood how this is done. You just had to use / deep / (>>> is the same)

 campaign:nth-of-type(odd) >>> .campaign { background: #f2f2f2; }

As Grundy writes on the Internet / deep / and >>> are outdated and should not work (although they work for me). I found Angular 2 documentation about view-encapsulation: https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation And the campaigns component set encapsulation: ViewEncapsulation.None and made css

 campaign:nth-of-type(odd) .campaign { background: #f2f2f2; }

It turned out the same result.