Gzipped and Cached CDN:
Original VCS Code:

link pseudo-class filters

Link psudeo-classes provide a mechanism to select anchor elements based on their href relationship within the current page in order to allow special styling of different kinds of 'internal' links. It is based on especially useful and not terribly difficult to implement portions of the W3C Working Draft from September 29 2011.

Table of Contents

  1. :-links-local
  2. :-links-target

1. The -links-local pseudo-class

The local pseudo class :-links-local(level), is a funtional notation taking one optional non-negative integer argument representing a number of path levels ("/") to match. A comparison is done between the current URL and the URL described in the links href attribue. Relative paths are converted to absolute for purposes of this comparison. Scheme, user name, port, querystring and fragment portions of the urls are not considered.

Given the links:

  1. <a href="http://www.example.com">Home</a>
  2. <a href="http://www.example.com/2011">2011</a>
  3. <a href="https://www.example.com/2011/03">March</a>
  4. <a href="http://www.example.com/2011/03/">March</a>
  5. <a href="http://example.com/2011/03">March</a>

and the styles:

  1. a:-links-local {...}
  2. a:-links-local(0) {...}
  3. a:-links-local(1) {...}
  4. a:-links-local(2) {...}
  5. a:-links-local(3) {...}

If the document's URI is http://www.example.com/2011/03/:

  1. Link 1 would receive Style 2
  2. Link 2 would receive Styles 2 and 3
  3. Link 3 would receive Styles 2, 3, and 4
  4. Link 4 would receive Style 1
  5. Link 5 would remain unstyled, and Style 5 would not be applied to anything.

2. The -links-target pseudo-class

The target pseudo class :-links-target(), is a funtional notation taking no arguments. It represents an element which currently serves as the target identified by the fragment identifier in the URL. If the current URL has no fragment identifier there is no matching target.


Given the HTML:

<h3><a name="glossary">Glossary</a></h3>

And the rule:

	background-color: yellow;