The:targetpseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

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 anidattribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

備註: Theidattribute was new in HTML 4 (December 1997). In old-style HTML <a> is a target element. The:targetpseudo-class applies to those targets as well.


:target {
  outline: solid red;
} /* draw a red, solid line around the target element */
/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */

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

:target:before {
    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%;

Working with display: none elements…

The :target pseudo-class also works fine with undisplayed elements:

<!doctype html>
    <meta charset="UTF-8" />
    <title>:target pseudoclass example</title>
      #newcomment {
        display: none;

      #newcomment:target {
        display: block;
    <p><a href="#newcomment">Add a comment</a></p>
    <div id="newcomment">
          Write your comment:<br />


HTML Standard
# selector-target
Selectors Level 4
# the-target-pseudo


BCD tables only load in the browser