Styling div inside a tab

Hello !

I’m trying to customize a div in a tab but the problem is that the “current” class doesn’t apply to child elements.

I’ve searched everywhere on google but I can’t find anything about this.

Overall, I’d like to add a div in the current tab with a black bg and have the other tabs have a transparent bg.

Maybe I’m missing something obvious?

Thanks for your help!

Capture d’écran 2024-03-25 à 15.21.51

hi @Koslani the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName

Hello ! Sorry, here is my read-only site :

https://preview.webflow.com/preview/nicolass-stupendous-site-ed6077?utm_medium=preview_link&utm_source=designer&utm_content=nicolass-stupendous-site-ed6077&preview=21a5e6e86dda0094fb5db6bd88e08252&pageId=65fd88cb7b7e1f63a478363e&workflow=preview

And my published site : project2

hi @Koslani you are pointing to element (circle) you are not able make change without custom JS code. When you check your live website with dev tools you can see that “current” tab link have class w--curent and attribute aria-selected="true".

You need to add click event listener to each tab check if classList.contains(“w–current”), if true remove background on all circles and set color to element (circle) with w--curent.

You can do identical thing checking aria attribute.

Your choice.

I am not aware how it will be possible do that “no-code” way with WF options :man_shrugging:

Hi @stan Thanks a lot for your reply, I must admit I was looking for a no-code solution as I don’t know how to code in js at all haha.
Thanks for taking the time to reply!