:target

  • Revision slug: CSS/:target
  • Revision title: :target
  • Revision id: 2774
  • Created:
  • Creator: fl0rian
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

The :target CSS pseudo-class represents a target element.

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: solid red }  /* draw a red, dotted line around the target element */
/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */  

:target { 
    -moz-box-shadow:  0.2em 0.2em 0.3em #888;
 -webkit-box-shadow:  0.2em 0.2em 0.3em #888;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}

Note

The id attribute was new in HTML 4 (December 1997).  In old-style HTML <a name="foo"> is a target element.  The :target pseudo-class applies to those targets as well.

Browser compatibility

Browser Lowest version
Internet Explorer ---
Firefox (Gecko) 1.0 (1.3)
Opera 9.5
Safari (WebKit) 1.3 (525)

Specifications

See also

Using the :target selector

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> :target </code>CSS pseudo-class represents a target element.</p>
<p>URIs with fragment identifiers link to a certain element within the document, known as the <em>target element</em>. For instance, here is a URI pointing to an <em>anchor</em> named <span style="border: 1px dotted gray;">section2</span>:<br>
  <code class="plain">http://example.com/folder/document.html<code style="border: 1px dotted gray;">#section2</code></code><br>
The <em>anchor</em> can be any element with an<code> id </code>attribute, e.g.<code> &lt;h1 id="<span style="border: 1px dotted gray;">section2</span>"&gt; </code>in our example. The <em>target element</em><code> h1 </code>can be represented by the<code> :target </code>pseudo-class.</p><h3>Examples</h3>
<pre>:target { outline: solid red }  /* draw a red, dotted line around the target element */
</pre>
<pre>/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */  

:target { 
    -moz-box-shadow:  0.2em 0.2em 0.3em #888;
 -webkit-box-shadow:  0.2em 0.2em 0.3em #888;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}
</pre>
<h3>Note</h3>
<p>The<code> id </code>attribute was new in HTML 4 (December 1997).  In old-style HTML<code> &lt;a name="foo"&gt; </code>is a target element.  The<code> :target </code>pseudo-class applies to those targets as well. </p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.3)</td> </tr> <tr> <td>Opera</td> <td><strong>9.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.3</strong> (525)</td> </tr> </tbody>
</table>
<h3>Specifications</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">CSS 3 Selectors #:target</a> Working draft</li>
</ul>
<h3>See also</h3>
<p><a class="internal" href="/En/Using_the_:target_selector" title="En/Using the :target selector">Using the :target selector</a></p>
Revert to this revision