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.

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.

• CSS Popup Slider repository
• CSS Modal repository

Comments

[Tanim Mahbub]

Got the active state of the tab-buttons fixed using the :has() selector, now it's just CSS, not Javascript.