Netscape DevEdge

Skip to: [content] [navigation]

Using the :target selector

As an aid to identifying the destination of a link that points to a specific portion of a document, the Selectors Candidate Recommendation introduces the :target pseudoclass. Netscape 7.1 introduces support for this pseudoclass into the Netscape family, giving authors a new way to assist users keep oriented within large documents.

Picking a Target

The pseudoclass :target is used to style the target element of a URI containing a fragment identifier. For example, the URI http://devedge.netscape.com/viewsource/2003/target-selector/#Example contains the fragment identifier #Example. In HTML, identifiers are found as the values of either id or name attributes, since the two share the same namespace. Thus, the example URI would point to the heading "Example" in this document.

Suppose you wish to style any h2 element that is the target of a URI, but do not want any other kind of element to get a target style. This is simple enough:

h2:target {font-weight: bold;}

It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a border to the #Example fragment, we would write:

#Example:target {border: 1px solid black;}

Targeting the Root Element

If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:

*:target {color: red;}

There is one potential danger lurking in this seemingly straightforward rule, however: it will select any element. Thus, a URI with no fragment identifier would cause that rule to select the root element of the document and style it. This would mean, in HTML and XHTML documents, styling the html element. If the style involves an inherited property such as color, then it will be applied to descendant elements. This could lead to, for example, all of the text in a document being colored red, or the html being given a background color separate from the body element's background.

It is far more likely that the author wishes to style any target element found within the document body, since that's the portion of the document that's seen by users. Therefore, this rule is a better alternative:

body *:target {color: red;}

This will restrict the target styling to target elements that are descended from the body.

Note that Netscape 7.1 does not actually style the root element if the URI does not contain a fragment identifier, but future versions of Netscape (as well as other browsers) may include this behavior.

Example

In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause the "One" text to become the target element, and so it will be styled in Netscape 7.1. Note that the first time this is tried, the document may jump to a new scroll position, since target elements are generally placed as close to the top of the browser window as possible.

Another example of this ability is built into the article itself. Go back to the beginning of the document so that the "Table of Contents" is visible. Selecting any of the links in the table will style the heading targeted by those links. We'll leave it to you to discover how they're styled.

Conclusion

In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated. Authors are encouraged to constrain target styles to the body element, but this is not an absolute rule.

A+R