ANIMATED TAB SWITCHER with CSS :HAS pseudo class

The :HAS pseudo class in CSS is a pretty powerful feature that allows you to style a parent element based on the children selectors. In this demo, we see how to use this pseudo class to create an animated tab switcher.
Codepen: codepen.io/Dillion/pen/WNmoMXX
Resources:
* • Why is REPEAT 1fr not ...
* • BEFORE & AFTER PSEUDO ...
* • ANIMATED SWITCHER/TOGG...
Subscribe to My Channel: bit.ly/deeecode
Join my Discord: deeecode.com/discord
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida

[@jaswanthreddy8870]

Great video 😊😊😊😊

[@deeecode]

I'm glad you enjoyed it :)

[@abdulmuminyqn]

Well explained

[@deeecode]

So glad to hear :)

[@everything_Ola]

😮
Wow. 👏 👏.
Good content. Very good.

[@deeecode]

Thank you very much

[@jaydeep-p]

What would you do if the widths of the tabs were not the same? I would do js

[@deeecode]

Yeap. If the widths were not the same, then you'd need to js to retrieve the width of each tabs, and use those widths to calculate the parent width.
You'd also need to take note of the fact that the widths can change, so you'd be quering the DOM often for that information
Another thing you can do is, if you know some tabs "should be wider" because of the content, you can do something like 30%, 45% 25%
So 30% for first tab, 45% for second tab and 25% for third tab....this way, you wouldn't have to constantly query the width of the tabs

[@golden1987]

Cool stuff. I modified your code to work with inset. Need a bit of math, buy those are my changes in your code:
--inset: 5px;
inset: var(--inset);
--width: calc( (100% / var(--count)) - (2 * (var(--inset))));
width: var(--width);
transform:translateX(calc(100% * var(--active) + (2 * (var(--inset)) * var(--active))));
transition: transform 300ms;
This will work for any number of tabs, of course you'll need to add more .tabs:has(.tab:nth-child(X).active) selectors :)

[@deeecode]

Wow that's a lot of calculations haha...thanks for sharing :)

[@allahisrabb3443]

Look your tutorials bosses

[@deeecode]

So glad to hear :)