Re: Selectors 4 local link pseudo-class

On 09/29/2011 04:48 PM, Brad Czerniak wrote:
> 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.

Selectors are fast only insofar as they are solving problems that are fast
to solve. :) I don't think this particular problem is fast to solve. It can
be optimized somewhat for deeply nested structures, but in the flat tree
structure that would be common in your use case, it's close to O(N), N being
the number of elements in the tree.

The "back to top" link case is easy to solve, though: instead of .back-to-top
you can just use [href="#top"]. :)

~fantasai

Received on Tuesday, 4 October 2011 00:43:54 UTC