CSS Nth Child
Utility
Layout
CSS
<style>
/* Create a repeating pattern every 3 items */
.your-cms-item:nth-child(3n+1) { background-color: red; }
.your-cms-item:nth-child(3n+2) { background-color: blue; }
.your-cms-item:nth-child(3n+3) { background-color: green; }
/* Create a repeating pattern every 3 items while targeting the item's children */
.your-cms-item:nth-child(3n+1) .item-child { background-color: yellow; }
.your-cms-item:nth-child(3n+2) .item-child { background-color: green; }
.your-cms-item:nth-child(3n+3) .item-child { background-color: purple; }
/* Target the 1st, 2nd, and 3rd item with no repeating pattern */
.your-cms-item:nth-child(1) { background-color: red; }
.your-cms-item:nth-child(2) { background-color: blue; }
.your-cms-item:nth-child(3) { background-color: green; }
</style>Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
Last Updated: Dec 3, 2025
<style>
/* Create a repeating pattern every 3 items */
.your-cms-item:nth-child(3n+1) { background-color: red; }
.your-cms-item:nth-child(3n+2) { background-color: blue; }
.your-cms-item:nth-child(3n+3) { background-color: green; }
/* Create a repeating pattern every 3 items while targeting the item's children */
.your-cms-item:nth-child(3n+1) .item-child { background-color: yellow; }
.your-cms-item:nth-child(3n+2) .item-child { background-color: green; }
.your-cms-item:nth-child(3n+3) .item-child { background-color: purple; }
/* Target the 1st, 2nd, and 3rd item with no repeating pattern */
.your-cms-item:nth-child(1) { background-color: red; }
.your-cms-item:nth-child(2) { background-color: blue; }
.your-cms-item:nth-child(3) { background-color: green; }
</style>