Question

Just came across this by Chris Coyier – http://css-tricks.com/examples/CSSTabs/

Can anyone explain me, how does the class .cur get applied to a tab’s heading, when we click it? There’s no js in it.

Answer 1

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).