Styling for every nth child

up:: CSS

Component

Put the .is-alternating-accent class on whatever you want. Put the .is-alternating-parent class on the repeated element.

.SBLinkCard.rounded.bg-white.shadow-lg.is-alternating-parent
  NuxtLink.items-between.flex.h-full.flex-col(:href="href")
    div
      .grid.items-end
        Image.col-span-full.row-span-full.rounded-t.is-alternating-accent(:src="src", ratio="landscape", alt="")
        p.relative.bottom-0.z-10.col-span-full.row-span-full.px-4.pb-2.text-sm.uppercase.text-white.drop-shadow(
          v-if="overHeading"
        ) {{ overHeading }}
      .h-1.is-alternating-accent
      .w-full.p-4
        h3.font-bold {{ heading }}
        p {{ description }}
    .mt-auto.flex.border-t.p-4
      .ml-auto.flex.items-center.p-2.uppercase.text-white.is-alternating-accent
        span.text-sm Find out more
        Icon.text-xs(icon="fa chevron-right")
 

CSS

  /* alternating accent (for link card) */
  .is-alternating-parent {
    &:nth-child(4n + 1) {
      & .is-alternating-accent {
        @apply bg-green-400;
      }
    }
    &:nth-child(4n + 2) {
      & .is-alternating-accent {
        @apply bg-blue-400;
      }
    }
    &:nth-child(4n + 3) {
      & .is-alternating-accent {
        @apply bg-red-400;
      }
    }
    &:nth-child(4n) {
      & .is-alternating-accent {
        @apply bg-pink-400;
      }
    }