<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/lib/xsl/devedge-1.00/article_en.xsl"?>
<nde:article
   url="/viewsource/2003/target-selector/"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:nde="http://devedge.netscape.com/2002/de"
   xmlns:ent="http://devedge.netscape.com/2003/ent"
   xml:lang="en">

<nde:header>
<nde:title>Using the :target selector</nde:title>
<nde:category>Article</nde:category>
<nde:pubdate year="2003" month="06" day="30"/>
<nde:summary>
When a URL points at a specific piece of a document, it can be difficult to ascertain.  Fnd out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.
</nde:summary>
<nde:channels>
 <nde:channel id="viewsource"/>
 <nde:channel id="css"/>
 <nde:channel id="ns-7.1"/>
 <nde:channel id="ns-7"/>
</nde:channels>
<nde:keywords>css, css3, selector, target, fragment</nde:keywords>

<nde:authlist>
 <nde:author>
   <nde:authname>Eric Meyer</nde:authname>
   <nde:authtitle>Standards Evangelist</nde:authtitle>
   <nde:authaffil>Netscape Communications</nde:authaffil>
 </nde:author>
</nde:authlist>

</nde:header>

<nde:head>
<style type="text/css">
#content *:target {background: yellow;}
#content h2:target {padding-left: 25px; border: 1px solid black; border-width: 1px 0;
   background: yellow url(target.gif) 0 50% no-repeat;}
</style>
</nde:head>

<nde:content>

<p>
As an aid to identifying the destination of a link that points to a specific portion of a document, the <a href="">Selectors Candidate Recommendation</a> introduces the <code>:target</code> 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.
</p>

<h2>Picking a Target</h2>
<p>
The pseudoclass <code>:target</code> is used to style the target element of a <acronym title="Universal Resource Identifier">URI</acronym> containing a fragment identifier.  For example, the URI <code>http://devedge.netscape.com/viewsource/2003/target-selector/#Example</code> contains the fragment identifier <code>#Example</code>.  In HTML, identifiers are found as the values of either <code>id</code> or <code>name</code> attributes, since the two share the same namespace.  Thus, the example URI would point to the heading "Example" in this document.
</p>
<p>
Suppose you wish to style any <code>h2</code> 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:
</p>
<pre><![CDATA[
h2:target {font-weight: bold;}
]]></pre>
<p>
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 <code>#Example</code> fragment, we would write:
</p>

<pre><![CDATA[
#Example:target {border: 1px solid black;}
]]></pre>


<h2>Targeting the Root Element</h2>
<p>
If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:
</p>

<pre><![CDATA[
*:target {color: red;}
]]></pre>

<p>
There is one potential danger lurking in this seemingly straightforward rule, however: it will select <em>any</em> 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 <code>html</code> element.  If the style involves an inherited property such as <code>color</code>, 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 <code>html</code> being given a background color separate from the <code>body</code> element's background.
</p>
<p>
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:
</p>
<pre><![CDATA[
body *:target {color: red;}
]]></pre>
<p>
This will restrict the target styling to target elements that are descended from the <code>body</code>.
</p>
<p>
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.
</p>

<h2>Example</h2>
<p>
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.
</p>

<div id="example">
<p>
<a id="one">One</a>
<a id="two">Two</a>
<a id="three">Three</a>
<a id="four">Four</a>
<a id="five">Five</a>
</p>
<p>
<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
</p>
</div>

<p>
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.
</p>

<h2>Conclusion</h2>
<p>
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 <code>body</code> element, but this is not an absolute rule.
</p>

</nde:content>

<nde:related area="nde">
 <nde:item url="/central/css/">CSS Central</nde:item>
 <nde:item url="/library/releases/netscape-7.1/">Other Articles about Netscape 7.1</nde:item>
</nde:related>

<nde:related area="ext">
 <nde:item url="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectors, Section 6.6.2</nde:item>
</nde:related>

</nde:article>
