Editing the first 3 items on CMS list uniquely for blog

Design help Custom code
1

I want to style the first index of the CMS uniquely and then 2nd and 3rd have the same styling, then 3rd - last share the same formatting. So in total have 3 different styles, but repeat only once, twice, and infinitely. I looked at some tutorials but they seem to be putting these into loops, but I just want the first few to have different styles.

I placed the embed code in the header of the page as well as above the CMS collection list wrapper on the navigator. I unfortuneately cannot share the website because it is under NDA.

Thank you in advance!

I tested with this code but didn’t work:

<style>
.collection-list:nth-child( 1)  .collection-item {

background-color: red;
height: 1000px;
}

</style>
2

Pretty sure :nth-child needs to be on the element you’re counting,
so it would be something more like this depending on your HTML;

.collection-list .collection-item:nth-child(1) {
  ...
}
3

Yes that worked! Thank you :slight_smile:

1 Like