Selectors 4 local link pseudo-class

The :local-link pseduo-class has the potential to be really useful. I like
how it takes an argument so that it can be used at multiple levels.

Here's a case where this pseudo-class or similar might be apropos: a page
has a wiki-style generated table of contents at the top with id anchors and
a "back to top" anchor at the bottom. The ids to which the TOC links point
are all below the TOC, and so have a downward arrow icon background for each
instance. The "back to top" link similarly has an upward icon of
commensurate style.

While this could be implemented with
#toc a[href^="#"]{background-image:url(down-arrow.png);}
..back-to-top{background-image:url(up-arrow.png);}
for a particular site where the locations are known, what if there are
anchor links in body text that point to ids that are arbitrarily above or
below the linked area? Could one or more pseudo-classes or an additional
argument in this pseudo-class *provide above/below information, based on
location in the markup*? The caveat for designers being that layout may
supersede document order.

Since I always heard id (or I suppose name) selectors were fast, I figured
this would be in the realm of possibility.

Thank you for your time and consideration.

Received on Saturday, 1 October 2011 20:03:49 UTC