Revision 2765 of :target

  • Revision slug: CSS/:target
  • Revision title: :target
  • Revision id: 2765
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 1 words added, 2 words removed

Revision Content

{{ CSSRef() }}

Summary

URIs with fragment identifiers link to a certain element within the document, known as the target element.

For instance, here is a URI pointing to an anchor named section2:
 http://example.com/folder/document.html#section2
The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example.

The target element h1 can be represented by the :target pseudo-class.

Examples

:target { outline: dotted red }  /* draw a red, dotted line around the target element */

Specifications
Edit section

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
Firefox 1.0
Opera 9.5
Safari 1.3

 

 

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>URIs with fragment identifiers link to a certain element within the document, known as the <em>target element</em>.</p>
<p>For instance, here is a URI pointing to an <em>anchor</em> named <strong>section2</strong>:<br>
 <span class="nowiki">http://example.com/folder/document.html<strong>#section2</strong></span><br>
The <em>anchor</em> can be any element with an id attribute, e.g.<code> &lt;h1 id="<span style="background-color: rgb(192, 192, 192);">section2</span>"&gt; </code>in our example.</p>
<p>The <em>target element</em> h1 can be represented by the<code> :target </code>pseudo-class.</p><h3>Examples</h3>
<pre>:target { outline: dotted red }  /* draw a red, dotted line around the target element */
</pre>
<h3 class="editable"><span>Specifications</span>
<div class="editIcon"><a href="/../../../../En/CSS/Outline#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo" rel="external nofollow" target="_blank" title="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a</td> </tr> <tr> <td>Firefox</td> <td>1.0</td> </tr> <tr> <td>Opera</td> <td>9.5</td> </tr> <tr> <td>Safari</td> <td>1.3</td> </tr> </tbody>
</table>
<p> </p>
<p> </p>
Revert to this revision