Streaming live at 10am (PST)

How to add custom style to children of odd or even collection items?

Hey guys,
I’m building a project overview page with teasers based on a collection list from CMS. There is this wonderful feature to structure list items by odd items (1st, 3rd, 5th etc.) or event items (2nd, 4th, 6th etc.). This allows me to mirror the teaser content and switch the image and the text structure on every 2nd collection item.

But how can I structure children of these list items?

I found no solution in Webflow designer and it seams like :nth child is not supported either.
Would highly appreciate if anybody knows how to solve this problem.

here is my project:
https://preview.webflow.com/preview/jan-grosse-architektur?utm_medium=preview_link&utm_source=dashboard&utm_content=jan-grosse-architektur&preview=2c01e4d3b0e1b2f6f6ce0b3e799f8cca&mode=preview

PS.: I want to mirror the image slider indicator and the arrow buttons. Both is still work in progress.

hi @Max_Bach it can be done with simple JS loop.

your navigation container is flex so to reverse its structure you have to only add custom CSS class

.reverse{
flex-direction: row-reverse;
}

and add this custom code

const projectNodes = document.querySelectorAll(".w-dyn-item");
const projectArray = Array.from(projectNodes);

projectArray.map((project, i) => {
  if ((i + 1) % 2 === 0) {
    const oddSliderNav = project.querySelector(".slider_menue");
    oddSliderNav.classList.add("reverse");
  }
});

it should work
happy no-coding

Hey @Stan thanks for your help. I’ve implemented it and its reversing the slider_menue but there is no more “even structure”. So its reversing it for all the collection items. Could you check if I might did something wrong?

… added the class to my slider-menue:

… put HTML Embed Code into the sider-menue:

… and I added custom code into the before body tag of my page:

Here is the result:

Its doing it but unfortunately not on every 2nd collection item :frowning:

hi @Max_Bach do NOT add reverse in Webflow classes, ONLY in custom CSS, otherwise class will be applied to ALL elements. Sorry I didn’t mentioned it as I didn’t thing that is necessary, code I have provide add class reverse dynamically.

I have also noticed that you didn’t add DOMContentLoaded and JS code is wrapped in wrong tag correct tag for scripts is <script> </script> and no <style>, tag <style> is for CSS.
here is exact JS code


<script>
document.addEventListener("DOMContentLoaded", () => {
  const projectNodes = document.querySelectorAll(".w-dyn-item");
  const projectArray = Array.from(projectNodes);

  projectArray.map((project, i) => {
    if ((i + 1) % 2 === 0) {
      const oddSliderNav = project.querySelector(".slider_menue");
      oddSliderNav.classList.add("reverse");
    }
  });
});
</script>

Let me know if you have been able to implement it :wink:

1 Like

waaaah nice it works!! thank you so much :slight_smile:
as you can see I’m totally lost on coding :DD

so I only need to get my custom slider finished yet. but this is another story :wink:

glad to help, if this solved your request, feel free to check any response as solution to close this request as solved

Have a good day

1 Like

yap I did. have a good one too :wink:

1 Like

Hi @Max_Bach I have renamed your request more accurately to be easier find solution for other forum members

1 Like