Code Tricks

Customize the look of each collection item (nth child)

Created by

Timothy Ricks

See resource

Code

<style>
/* Customize every 1st, 2nd, & 3rd collection item itself */
.your-collection-item:nth-child(3n+1) {background-color: red;}
.your-collection-item:nth-child(3n+2) {background-color: blue;}
.your-collection-item:nth-child(3n+3) {background-color: green;}

/* Customize every 1st, 2nd, & 3rd item inside your collection item */
.your-collection-item:nth-child(3n+1) .item-inside-collection-item {background-color: yellow;}
.your-collection-item:nth-child(3n+2) .item-inside-collection-item {background-color: green;}
.your-collection-item:nth-child(3n+3) .item-inside-collection-item {background-color: purple;}
</style>
Copied!

Tutorial

Steps & Description

Tips & Notes

Related resources

No items found.