MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

For example, the following URL has a fragment (denoted by the # sign) that points to an element called section2:

http://www.example.com/index.html#section2

The following element would be selected by a :target selector when the current URL is equal to the above:

<section id="section2">Example</section>

Syntax

:target

Examples

Basic example

HTML

<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>

<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p></pre>

CSS

:target {
  box-shadow: 0 0 2px gray;
}

/* You can use pseudo-elements inside a target element */
:target::before {
  font: 70% sans-serif;
  content: "►";
  color: gray;
  margin-right: .25em;
}

/* You can apply special styles to elements within a target element */
:target i {
  color: orange;
}

Result

Pure-CSS lightbox

Note: A more complete pure-CSS lightbox based on the :target pseudo-class is available on GitHub (demo).

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>

CSS

/* Unopened lightbox */
.lightbox {
  display: none;
}

/* Opened lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':target' in that specification.
Living Standard Defines HTML-specific semantics.
Selectors Level 4
The definition of ':target' in that specification.
Working Draft No changes.
Selectors Level 3
The definition of ':target' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 9 9.5 1.3
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.7 or earlier) 9.0 9.5 2.0

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Zuletzt aktualisiert von: mfluehr,