Dynamically Highlighting Page Sections

You’ve now seen two examples of how CSS3’s structural pseudo-classes can add visual enhancements to your pages while keeping your code free of classes and IDs, and without using JavaScript. Other CSS3 pseudo-classes can also add much more dynamic-looking effects to your pages, such as highlighting the current section when you use a within-page link to jump down the page. This is not only a visual enhancement, but a usability one, as it helps orient the viewer to where they are in the page.

For instance, when you click on a citation number in a Wikipedia article, the page jumps down to that note at the end of the page. Wikipedia highlights the note you clicked on so you don’t have to locate it among the potentially hundreds of other notes (Figure 5.8). This is especially helpful in orienting the viewer when the selected item is too close to the bottom of the page to be brought all the way up to the top of the browser window.