A simple solution to alternating backgrounds of list items that a development team said they could not do within the platform a site was being built on.
Solution inspired by Stephanie Eckles (follow on twitter) | https://moderncss.dev/guide-to-advanced-css-selectors-part-two
Simple CSS - alternating items defined with :nth-child({numItems}n + {itemNum})
.item:nth-child(3n + 1){
background-image:url("assets/orange.png");
}
.item:nth-child(3n + 2){
background-image:url("assets/yellow.png");
}
.item:nth-child(3n + 3){
background-image:url("assets/red.png");
}
Just some content to create height
Just some content to create height
Just some content to create height
Just some content to create height
Just some content to create height