“Tab” navigation for a site is easy to create with CSS, and you can use PHP or JavaScript to bring the link representing the current page to greater prominence. More complex is an “in-page” content tab system, in which the goal is to have a series of “slides” stacked on top of each other on a single page, with tabs to choose between them. It’s relatively easy to activate the slides when the user hovers over the tab, but changing the slides active on click is a bit harder to capture. Thankfully, there is a new CSS3 pseudo-element selector, :target, that can do the work for us.
First, let’s create some basic markup. Let’s say we were going to create a series of slides about some of Saturn’s moons: Titan, Mimas, Enceladus and Iapetus. We’ll follow the basic markup of our simple image gallery example: the names of the moons are clickable definition terms, and our explanation and illustration of each is definition declarations.
<dl id=moons>
<dt><a href=#titan>Titan</a>
<dd id=titan><img src=titan.jpg alt=Titan>
<p>Saturn's largest moon is unique in several respects.
</dd>
<dt><a href=#iapetus>Iapetus</a>
<dd id=iapetus><img src=iapetus.jpg alt=Iapetus>
<p>Iapetus is the third largest moon of Saturn.</p>
</dd>
</dl>
Note the id value on each <dd>, and the href links within each <dt>. These go to anchor links, just as we have explored in the past. Next, the associated CSS to produce the basic appearance of the tabs:
dl#moons { position: relative; }
dl#moons dt { display: inline; }
dl#moons dt a { text-decoration: none; }
dl#moons dd { position: absolute; left: 0; background: #000; color: white; margin-left: 0; }
dl#moons dd p { text-align: justify; }
dl#moons dd img { width: 200px; height: 200px; float: right; margin: 20px; }
dd:target { z-index: 10; }
There are a few ways to explain target: you might think of it as the CSS equivalent to the for attribute in forms, except that it is used for everything else. Essentially it makes CSS aware of the relationship between id’s and links to those id’s, so that when links are clicked on we change the style of the target. In this case, we are altering the z-index of the target to an arbitrary number above 1.
Pro CSS3 Animation, Apress, 2013


