Click here or hit escape to close this.

CSS siblings and :target

Notice: this post is 6 years old, its content may be outdated.

A cool thing I just discovered will working on the WPMovieLibrary tabbed metabox: use CSS siblings and :target pseudo-class to build a full-CSS tab menu.

Siblings works with the ~ combinator to target elements from the same container if the second element is preceded by the first; The :target pseudo-class can be used to style an element targeted by an identifier in the URI. Combine the two and you can style a target link — the tab menu link — and the targeted panel.

Two things to take into account: the menu has to be located after the panels, and both menu and panels have to be children of the same parent element. In my case it meant I had to modify a bit the way the tabs were built, which involving some floating and margins (vertical menu). If you’re using an horizontal menu you’ll have to play with positions to have your menu showing on top of your tabs.

I’m not going to develop the coding part, CSS-Tricks and Nathan Faubion did that for you already. As mention on the former, this is far from an ideal technique to build tabs, the biggest inconvenient IMHO is that relying on URI identifier makes the user jump through the page, which is pretty dirty is you’re dealing with massive tabs.

That said, it’s a very useful trick to provide minimal tabbing as a fall-back for JS-disabled pages. In my case the WordPress Dashboard is very limited if you don’t have JS enabled, but it happens, either by the user’s will or a bug causing JS errors and preventing your nice JS-powered tab to work, so it’s always nice to provide some alternative to make sure a tabbed metabox somehow works in every situation.