CSS :target Pseudo-Klasse
Die CSS-Pseudo-Klasse :target wählt Elemente aus, die das Ziel eines internen Links sind. Lesen Sie mehr und üben Sie mit Beispielen.
Die Pseudo-Klasse :target trifft ein Element, dessen id dem Fragment der aktuellen URL entspricht — dem Teil nach dem #. Wenn Sie eine URL wie page.html#section2 aufrufen, wird das Element mit id="section2" zum Ziel, und :target ermöglicht Ihnen, es zu gestalten.
Diese Seite erklärt, wie :target funktioniert, wann Sie es einsetzen sollten, seine Einschränkungen und vier praktische Muster, die Sie ohne JavaScript umsetzen können: eine seitenübergreifende Hervorhebung, ein Tab-Menü, ein Modalfenster und eine Lightbox.
Wie :target funktioniert
Der Browser verfolgt ein Zielelement pro Seite — das Element, dessen id dem aktuellen URL-Fragment entspricht. Wenn Sie auf einen seiteneigenen Link wie <a href="#section2"> klicken, wird das Fragment aktualisiert, was:
- das passende Element in den sichtbaren Bereich scrollt, und
- dafür sorgt, dass dieses Element
:targeterfüllt und alle dafür geschriebenen Stile angewendet werden.
Da das Navigieren zu einem Fragment ein echter Verlaufseintrag ist, funktioniert die Zurück-Schaltfläche als „Rückgängig": Sie kehrt zum vorherigen Fragment (oder zu keinem Fragment) zurück, sodass ein :target-gesteuertes Menü, Modalfenster oder eine Lightbox sich schließt, wenn der Benutzer auf „Zurück" drückt.
/* Style the element currently referenced by the URL fragment */
:target {
border: 2px solid #1c87c9;
background-color: #eee;
}Einige wichtige Hinweise:
- Es kann immer nur ein Element gleichzeitig das Ziel sein — das Fragment ist ein einzelner Wert, daher erfüllt
:targetauf der Seite höchstens ein Element. - Es ist ein zustandsbehafteter Selektor. Der Zustand liegt in der URL, nicht im Markup oder in JavaScript — genau deshalb kann er interaktive Widgets ohne Scripting steuern.
- Ein bloßes
#löscht das Ziel. Das Verlinken aufhref="#"(oderhref="#nonexistent") hebt die Übereinstimmung auf, was bei den Schaltflächen „Schließen" in den Modal- und Lightbox-Beispielen unten der Mechanismus ist.
Wann man es verwenden sollte
Greifen Sie auf :target zurück, wenn Sie eine leichtgewichtige, skriptfreie Interaktivität wünschen, die natürlich an die URL gebunden ist:
- Hervorhebung des Ziels eines seiteneigenen Sprunglinks (Fußnoten, Glossareinträge, Inhaltsverzeichnis).
- Ein-/Ausblenden von Widgets — Tabs, Akkordeons, Modale, Lightboxes — bei denen eine teilbare oder als Lesezeichen speicherbare URL ein Vorteil ist.
Bevorzugen Sie JavaScript (oder native Elemente wie <details> und <dialog>), wenn der geöffnete Zustand die URL nicht ändern soll, wenn Sie den Fokus für Barrierefreiheit einfangen müssen oder wenn mehrere Bereiche gleichzeitig geöffnet sein sollen.
Hinweis zur Barrierefreiheit: Da
:targetdie Sichtbarkeit durch Navigation umschaltet, bewegen Tastatur- und Screenreader-Benutzer den Fokus automatisch auf das Zielelement — ein Vorteil. Es kann jedoch den Fokus nicht in einem Modalfenster einfangen, weshalb für echte Dialoge das native<dialog>-Element die robustere Wahl ist.
:target ist eine Pseudo-Klasse wie :hover und :focus; für einen umfassenderen Überblick über Selektoren, siehe CSS Selectors.
Syntax
:target {
/* CSS declarations */
}Version
:target wird in allen modernen Browsern weitgehend unterstützt. Es ist definiert in:
Beispiel: Hervorhebung eines Sprungziels
Klicken Sie auf einen Link, und der passende Absatz erhält einen Rahmen und einen Hintergrund, weil er zum :target wird:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:target {
border: 2px solid #1c87c9;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:target selector example</h2>
<p>
<a href="#example1">Jump to Paragraph 1</a>
</p>
<p>
<a href="#example2">Jump to Paragraph 2</a>
</p>
<p id="example1">
<strong>Paragraph 1</strong>
</p>
<p id="example2">
<strong>Paragraph 2</strong>
</p>
</body>
</html>Beispiel: ein Tab-Menü
Jeder Tab-Link verweist auf ein ausgeblendetes Panel. Nur das Panel, dessen id dem Fragment entspricht, wird angezeigt, sodass der sichtbare „Tab" derjenige ist, auf den Sie zuletzt geklickt haben:
<!DOCTYPE html>
<html>
<head>
<style>
.tab-menu div {
display: none;
background-color: #f5f5f5;
padding: 0 20px 20px;
}
.tab-menu a {
text-decoration: none;
padding: 10px;
margin: 20px 0;
display: inline-block;
}
.tab-menu div:target {
display: block;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<div class="tab-menu">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<div id="html">
<h2>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</h2>
<p>HTML-Hyper Text Markup Language
</p>
</div>
<div id="css">
<h2>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</h2>
<p>CSS-Cascading Style Sheets
</p>
</div>
<div id="php">
<h2>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</h2>
<p>PHP-Hypertext Preprocessor
</p>
</div>
</div>
</body>
</html>Beispiel: ein Modalfenster
Das .modal ist standardmäßig ausgeblendet und wird nur angezeigt, wenn es das :target ist. Der Link „Modal öffnen" setzt das Fragment auf #modal; die Schließen-Schaltfläche verlinkt auf #, was das Ziel löscht und das Modalfenster wieder ausblendet:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
text-decoration: none;
padding: 10px 20px;
background-color: #8ebf42;
color: #ffffff;
font-family: sans-serif;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
text-align: center;
line-height: 1.6;
}
header {
background-color: #337ab7;
font-size: 25px;
color: white;
}
header h2 {
text-align: left;
}
footer {
background-color: #337ab7;
font-size: 20px;
color: white;
}
footer p {
text-align: right;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Header</h2>
</header>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<footer class="container">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>Es gibt einen kleinen Unterschied zwischen Modalfenstern und Lightboxes. Eine Lightbox kann durch Klicken auf den abgedunkelten Bereich außerhalb des Popups geschlossen werden, während ein Modalfenster nur durch Interaktion innerhalb des Dialogs geschlossen wird (hier über die Schließen-Schaltfläche).
Beispiel: eine Lightbox
Die Lightbox funktioniert genauso wie das Modalfenster, aber ein bildschirmfüllender Overlay (.close::before) liegt hinter dem Inhalt und verlinkt ebenfalls auf #, sodass ein Klick an einer beliebigen Stelle außerhalb der Abbildung sie schließt:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
background-color: #8ebf42;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
margin: 15px 0;
display: inline-block;
}
/* 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: #8ebf42;
}
/* 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;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#lightbox">Open Lightbox</a>
<div class="lightbox" id="lightbox">
<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>
</body>
</html>Verwandte Selektoren
:hoverund:focus— weitere interaktive Pseudo-Klassen zum Gestalten benutzergesteuerter Zustände.:not()— nützlich, um alles außer dem aktuellen Ziel zu gestalten, z. B..modal:not(:target).:rootund:empty— weitere strukturelle Pseudo-Klassen.- CSS Selectors — ein vollständiger Überblick über Selektortypen.