How does this pure CSS tab work?

css

Solution

It's relying on the CSS3 selector :target. Target are for sections within an html page, like http://www.example.com/page#section (SO uses them to jump to specific answers).

When the target is selected, the target pseudo class take over.

Here it's using z-index tricks to push the sections up and down on top of each other.

That's the general gist of it, I don't know the specifics.

Edit --

The "cur" class isn't applied at all. On the right, each "pane" has all three tabs defined in them, but with the "cur" class "hardcoded" for each pane. The z-indexing brings up the entire pane, with it tabs, to the top, creating the effect. When in fact, it's just 3 divs of HTML.

So there's no magic here (beyond the whole :target pseudo class).

Problem

Original source