CSS Master

</li>

<li id="tab2">

<p>This is tab 2</p>

</li>

<li id="tab3">

<p>This is tab 3.</p>

</li>

</ul>

</div>

It’sfairlystraightforward,consistingoftabsandassociatedtabcontent.Let’sadd
someCSS:

css/chapter1/selectors-target.css (excerpt)

[id^=tab] {

position: absolute;

}

[id^=tab]:first-child {

z-index: 1;

}

[id^=tab]:target {

z-index: 2;

}

Here’swherethemagichappens.First,we’veabsolutelypositionedallofourtabs.
Next,we’vemadeourfirsttabthetopmostlayerbyaddingz-index: 1.Thisisonly
importantifyouwantthefirsttabinthesourceordertobethefirsttabuserssee.
Lastly,we’veaddedz-index: 1toourtargettab.Thisensuresthatthetargeted
layerwillalwaysbethetopmostone.YoucanseetheresultinFigure1.27.

Selectors 41