How does this clean CSS tab work?

Question

Just stumbled upon this by Chris Koyer - http://css-tricks.com/examples/CSSTabs/

Can someone explain to me how the .cur class applies to the tab title when we click it? There is no js.

Answer 1

It relies on the CSS3: target selector. The goal is for sections on an html page, for example http://www.example.com/page#section (SO uses them to navigate to specific answers).

When a target is selected, the target pseudo-class takes over.

Here he uses z-index tricks to push sections up and down on each other.

What is the general meaning of this, I do not know the specifics.

Edit -

The cur class does not apply at all. On the right, each panel has all three tabs, but with the class "cur" hardcoded for each panel. Z-indexing raises the entire area, with its tabs, at the top, creating an effect. When in fact it is only 3 divs HTML.

So, there is no magic (outside the whole: the target pseudo-class).