CSS/Selektoren/Pseudoklasse/target
Der Titel dieses Artikels ist mehrdeutig. Für
- das target-Attribut siehe HTML/Textauszeichnung/a target
- die JavaScript-Eigenschaft event.target.
Mithilfe der Pseudoklasse :target werden Elemente selektiert, die Ziel eines Verweises sind. Die CSS-Anweisungen gelten nur dann, wenn der Verweis gerade aktiviert wurde.
:target {
color: red;
font-weight: bold;
}
In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter, fetter Schrift dargestellt.
Ein Klicken auf den unteren Link löst die Selektion wieder auf. Es wird nichts eingefärbt, da kein Element die id top besitzt.
Inhaltsverzeichnis
Anwendungsbeispiele[Bearbeiten]
Infobox[Bearbeiten]
Sie können die Pseudoklasse target verwenden, um eine Infobox auf- und zuzuklappen. Mit :target
können Sie das Ziel eines (internen) Links selektieren. Ein interner Link auf eine mit CSS ausgeblendete Infobox, kann durch einen Klicken das Element sichtbar mittels :target
sichtbar machen. Durch einen weiteren Klick auf einen anderen Link verliert die Infobox das :target
und wird wieder unsichtbar.
.details {
opacity: 0;
}
.details:target {
opacity: 1;
}
<ul>
<li>1. Eintrag <a href="#d1">Details</a></li>
<!-- … -->
</ul>
<div id="d1" class="details">
<h3>Details zum 1. Eintrag</h3>
<p>Hier stehen so viele Details, dass man um das Scrollen nicht drum rum kommt.</p>
<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
</div>
<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
Der Linktext "Schließen" dient Nicht-Sehenden zur Identifizerung des Schließen-Buttons. Der Text wird perr CSS durch ein "X" ersetzt.
Problem der Infobox mit :target
ist, dass die Browser-Historie vollgemüllt wird. Ein Klick auf die Pfeil-zurück-Taste bringt den Nutzer nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.
Bildergalerie mit Popupboxen[Bearbeiten]
In dieser Bildergalerie können Sie Bilder auswählen, die dann in Großansicht gezeigt werden:
<ul id="galerie">
<li><a tabindex="1" href="#bild1"><img src="dummy-1.jpg" alt="Spaß in der Sonne"></a></li>
...
</ul>
<figure id="bild1" class="details">
<img src="dummy-1.jpg" alt="Spaß in der Sonne">
<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
<figcaption>Spaß in der Morgensonne</figcaption>
</figure>
figure
-Element mit der Pseudoklasse target
selektiert und formatiert werden. Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure
verliert sein „target“.CSS[Bearbeiten]
@media all and (min-width: 35em) {
li {
width: 10em;
}
.details {
position: absolute;
right: 10%;
top: 10%;
background-color: #F1F3F4;
border: 0.1em solid #3983ab;
border-radius: 0 8px 8px;
padding: 1em 1em .2em;
width: 25em;
max-height: 20em;
overflow: auto;
display: none;
}
.details img {
width: 90%;
}
.details:target {
display: block;
}
.close {
width: 0;
height: 0;
border: 0;
text-shadow: none;
color: transparent;
}
.close::after {
position: absolute;
top: 1em;
right: 1em;
content: "X";
color: white;
background: #c32e04;
font: bold 1em/150% Georgia, Times, serif;
border: .1em solid #3983ab;
border-radius: 0 8px 8px;
display: block;
text-align: center;
width: 1.5em;
height: 1.5em;
padding: .2em 0 0 0;
}
}
figure
-Element mit der class="details"
wird im Ausgangszustand nicht angezeigt. Wenn der Link ausgewählt wird, kann das angesprochene figure mit der Pseudoklasse target selektiert und formatiert werden.
display: block;
sorgt dafür, dass es jetzt sichtbar wird.
figure
verliert sein „target“.Siehe auch[Bearbeiten]
- HTML/Tutorials/Links/Seiteninterne Verweise
- Autorennen: CSS-Animation, ausgelöst durch
:target
- unsichtbare Anker: Dialog-Box, die durch
:target
geöffnet wird.
target
wird das zunächst ausgeblendete Element sichtbar gemacht.