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