SELECTORS - CSS: Professional Techniques for Modern Layout - page 40

Anyone following that link will (if the browser gets it right) land not only on the targeted
page, but also at the point in the page where that fragment identii er (the #sec2-7 part)
appears. h is is sometimes done with an anchor, but it's better to just use an ID. Here are the
two scenarios:
< h3 >< a name ="sec2-7"> Exceptions </ a ></ h3 >
< h3 id ="sec2-7"> Exceptions </ h3 >
In either case, while the browser will jump to that point in the document, there's no visual cue
to show that you've gone there. With the :target pseudo-class, you can provide a cue. For
example, if you wanted to give a particular cue to any h3 that is the target of a fragment
identii er (see Figure 2-2), you could say:
h3:target { color : maroon ;
background : #FFA ;}
42
Figure 2-2: Highlighting a targeted element.
Of course, you might just want to apply that style to any element that's a target, no matter
what element it is, so just drop the h3 part and add a universal selector at the front, like so:
*:target { color : maroon ;
background : #FFA ;}