Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Selektoren/Pseudoklasse/target

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Dieser Artikel behandelt die CSS-Pseudoklasse :target. Für weitere Bedeutungen siehe 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.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<h2 id="struktur">Strukturelle Pseudoklassen</h2> <h2 id="target">Die Pseudoklasse target</h2> <p>Linkliste</p> <ul> <li><a href="#struktur">Strukturelle Pseudoklassen</a></li> <li><a href="#target">Pseudoklasse target</a></li> </ul>
In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.
Beachten Sie: Zur Aktivierung ist die Vergabe einer ID notwendig.

Anwendungsbeispiele[Bearbeiten]

Infobox[Bearbeiten]

Sie können die Pseudoklasse target verwenden, um beispielsweise „Schließen“-Buttons und deren Funktion nachzubilden.

Beispiel ansehen …
.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>
Mithilfe der Pseudoklasse target wird das zunächst ausgeblendete Element sichtbar gemacht.

Bildergalerie mit Popupboxen[Bearbeiten]

In dieser Bildergalerie können Sie Bilder auswählen, die dann in Großansicht gezeigt werden:

Beispiel ansehen …
<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>
Die Listenelemente enthalten einen internen Seitenanker auf ein figure-Element. Wenn der Link ausgewählt wird, kann das angesprochene 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]

Beispiel ansehen …
@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;
  }
}
Das 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.

Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.

Siehe auch[Bearbeiten]