Streaming live at 10am (PST)

Nth child selector on collection not working

Hi Webflowers,

I’m having an issue with a build i’m working on at the moment which is driving me crazy, i’m hoping someone in the community might be able to help me out.

I have a collection list which is displaying a list of h3s which are wrapped in link blocks. I simply want to change the font colour of each even item in the list.

Sounds easy right? For some reason I cannot figure out it’s not working, i’ve tried the following:

  • Use the new native webflow feature for colouring even nth child items (doesn’t work)
  • Use css in the head of the page to do something along the lines of a.roster-link-block:nth-child(even) {color: #red;} (doesn’t work)
  • Used an html embed with similar things, also trying to target different elements
  • USed jquery in an embed and then published the site to achieve the same thing - Doesn’t work

I replicated the structure with some other elements and using the same class names outside of a collection and get more the results i’d expect.
What’s weird is it seems like the hover or pressed state is taking on the nth child selector properties at some points.

I cannot wrap my head around this any help would be great, i’m not new to css or html so this is driving me a bit nuts.

Here is my site Read-Only:

Staging link:

hi @Oli_Ingram you are pointing wrong element. You are trying point to second child of a or h3 and in your case these elements doesn’t have any children, but even they will have you will point something else than you need. You should to point to children of the parent element. In this case Collection Item so it will point to anchor of each second Collection Item. Like this …

.home-roster-name:nth-child(odd) a{

You da man Stan.
Thank you so much! I was going crazy trying to figure this out. You are completley right, I just implemented this and it works and i’m so happy!

Thanks for taking the time to respond and help me on this. :smiley:

1 Like