Different background-color for odd / even with ion-cards


#1

hi there,

i am using some ion-cards within a ion-row like so:

    <ion-row responsive-sm>
	<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let question of question_set; let i=index">
      <ion-card class="card-custom-bg">
        ...
	  <ion-card>
	<ion-col>
</ion-row>

now i’d like to color every even card with a red background using

.card-custom-bg:nth-of-type(even) {
    background:red; 
}

but that does not work.

any ideas?
thanks a lot!


#2

You are repeating ion-col and not ion-card. That means ion-card is always going to be odd.

Something like this should work:

ion-col:nth-of-type(even) {
  ion-card {
    background: red;
  }
}

#3

Ah, of course. Thanks a lot.


#4

How can I Change the background color of an ion-card…?