Using the :target selector

  • Revision slug: Using_the_:target_selector
  • Revision title: Using the :target selector
  • Revision id: 71118
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 1 words added, 2 words removed

Revision Content

Summary

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. As an aid to identifying the destination of a link that points to a specific portion of a document, CSS3 Selectors introduces the {{ Cssxref(":target") }} pseudoclass. Netscape 7.1 introduced 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 {{ Cssxref(":target") }} is used to style the target element of a URI containing a fragment identifier. For example, the URI http://developer.mozilla.org/en/docs/Using_the_: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 all Elements

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;}

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. Note that 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.

<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>

<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>

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.

Related Links

Original Document Information

  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Last Updated Date: Published 30 Jun 2003
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

 

Revision Source

<h3><span class="comment">Summary </span></h3>
<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> As an aid to identifying the destination of a link that points to a specific portion of a document, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> introduces the<code> {{ Cssxref(":target") }} </code>pseudoclass. Netscape 7.1 introduced support for this pseudoclass into the Netscape family, giving authors a new way to assist users keep oriented within large documents.</p>
<h3 name="Picking_a_Target">Picking a Target</h3>
<p>The pseudoclass<code> {{ Cssxref(":target") }} </code>is used to style the target element of a URI containing a fragment identifier. For example, the URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></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>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>#Example:target {border: 1px solid black;}</pre><h3 name="Targeting_the_Root_Element">Targeting all Elements</h3>
<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>:target {color: red;}
</pre>
<h3 name="Example">Example</h3>
<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. Note that 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>&lt;a id="one"&gt;One&lt;/a&gt; &lt;a id="two"&gt;Two&lt;/a&gt; &lt;a id="three"&gt;Three&lt;/a&gt; &lt;a id="four"&gt;Four&lt;/a&gt; &lt;a id="five"&gt;Five&lt;/a&gt;</p>
<p>&lt;a href="#one"&gt;First&lt;/a&gt; &lt;a href="#two"&gt;Second&lt;/a&gt; &lt;a href="#three"&gt;Third&lt;/a&gt; &lt;a href="#four"&gt;Fourth&lt;/a&gt; &lt;a href="#five"&gt;Fifth&lt;/a&gt;</p>
</div>
<h3 name="Conclusion">Conclusion</h3>
<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.</p>
<h3 name="Related_Links">Related Links</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo3</a></li>
</ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information">Original Document Information</h3>
<ul> <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> <li>Last Updated Date: Published 30 Jun 2003</li> <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> <li>Note: This reprinted article was originally part of the DevEdge site.</li>
</ul>
</div>
<p> </p>
Revert to this revision