DEV Community 👩‍💻👨‍💻

Cover image for Pure CSS Tab using :target and :has()
Tanim Mahbub
Tanim Mahbub

Posted on

Pure CSS Tab using :target and :has()

When the CSS :target was introduced for the very first time, I was so excited that first I made a package of modals with different sizes and positions, and then I made a popup slider using the same CSS :target

After that, I tried to make a tab the same way, without any effect, just display: none; to display: block; but, the problem was- how can I display the first tab since the CSS :target doesn't work until the trigger is clicked.

Years passed, then a few days ago I came to learn about the :has() selector and it was just crazy. After going through the basic of :has() selector I found the solution for my CSS Tab that I started years ago.

The :has() selector solution

Now I have one issue left, the active state for the tab-buttons. I tried to fix it using :has() selector with a:visited (the same way in image) but the a:visited state doesn't change once its visited. So, waiting for the solution for this.

The browser-support is not there yet for :has() including Firefox and some other browsers. But Chrome supports it, hoppiing it'll be better soon.

We know that there is a radio-way ([type="radio"]) to make CSS Tab, I'm just trying to make another way, and now after almost 80% to perfection I'm sharing the idea with you. Let me know your thoughts.

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.