:target

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

Working with display: none elements…

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

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

#newcomment:target {
  display: block;
}
</style>

</head>
<body>
 <p><a href="#newcomment">Add a comment</a></p>
 <div id="newcomment">
  <form>
  <p>Write your comment:<br />
  <textarea></textarea></p>
  </form>
 </div>
</body>
</html>

Creating a pure CSS "lightbox"

The :target pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (live demo).

規範

Specification
HTML Standard
# selector-target
Unknown specification
# the-target-pseudo

瀏覽器兼容性

BCD tables only load in the browser

參見