I need to apply specific CSS styles to elements in a certain order within an image carousel. The carousel may contain any number of images, but only three images are displayed at a time. I want to style the first and third images differently from the second image.
Below is a simplified version of the code I am trying to achieve. I require a dynamic solution as the number of images in the carousel is unknown. Is there a formula, such as nth-of-type(4n-7), that can be used to target this order dynamically?
li:nth-of-type(1),
li:nth-of-type(3),
li:nth-of-type(4),
li:nth-of-type(6),
li:nth-of-type(7),
li:nth-of-type(9) {
color: red;
}
li:nth-of-type(2),
li:nth-of-type(5),
li:nth-of-type(8) {
color: blue;
}