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
Top comments (1)
Got the
active
state of the tab-buttons fixed using the:has()
selector, now it's just CSS, not Javascript.