:nth-child Class Wont Stay if I Create Another CMS Item

Hello, yesterday I created this topic (How to modify CMS Individual Item Styling?) in which I asked how I could modify an individual item from a dynamic CMS item list.

I managed to do so with nth-child and nth-of-type, but the problem I have now is that the highlight does not stay in the original element and moves towards the new I create in the CMS :point_down: How can I solve this?



As you can see, instead of staying on the “Community Manager & Social Media Strategist” card, the highlight “jumps” to the next item created in the CMS :point_down:

Thanks beforehand,
-David


Here is my site Read-Only: Webflow - Mis Marketers

You should address this with just the CMS and no pseudo class custom code. What you’re looking for is a “type”. Add a field, like an option field, and add an option, like “highlight”. Now design your items like if they were all highlighted, by having a colored div in the background for example. Now give the Highlight option to some posts. now select the div and with conditional visibility set it to visible when option equals highlight.

Pseudo classes are blindly targetting a position, not a particular element.

1 Like

Wow, I’m almost there thank you so much @vincent!

Thanks to this I managed to create a “type” for the logo. Now I can select in which card I show the logo (in the first image only the first and third card have the type, it works!), but the background is still resisting.

The problem is that it only shows the cards which have the highlight type and not the rest (there should be the four that are in the first photo)

How can I solve this? I tried to also create a div but it seems like it hides the rest of the cards and I want both highlighted and non-highlighted to show at the same time.

Thank you for your first answer and beforehand the next one @vincent

  • David

Almost there.

DON’T filter the list on the Highlight option. (remove this filter)

DO create a div for the bg color, just a div on the back, with nothing in it. Set it to Absolute and make it expand all the way in the Expander parent (that you pass Relative).

THEN select this div and add a conditional visibility: div is visible when option is ON.

I made a video of it: https://dl.dropboxusercontent.com/s%2F3quw35mtwukg60d%2F0p3oo.mp4

1 Like

@vincent what can I tell you… Thank you again and again for helping me solve this and even taking the time to record a video. I finally did it and I couldn’t be happier.

You are da man. :slight_smile:

1 Like

Thanks! Makes my day, every day :smiley:

1 Like