Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » CSS 3: Die :target-Pseudoklasse

CSS 3: Die :target-Pseudoklasse

  • Aktualisiert am 2. April 2023
  • von Jens Meiert
  • Webdesign
  •  

Die :target-Pseudoklasse ist Bestandteil des derzeitigen Entwurfs von CSS 3 und Teil einer ganzen Reihe neuer Selektoren. Werfen wir einen Blick auf zukünftige Einsatzszenarien.

Zu Beginn die Spezifikation. Ins Deutsche übersetzt erläutert der derzeitige Stand der Spezifikation :target wie folgt:

“Manche URIs beziehen sich auf eine Stelle innerhalb einer Ressource. Diese Art eines URI endet mit einem “Nummernzeichen” (#), gefolgt von einem Ankeridentifikator (der Fragmentidentifikator).

URIs mit Fragmentidentifikatoren linken zu einem bestimmten Element innerhalb des Dokuments, das als Zielelement bekannt ist. Hier ist zum Beispiel ein URI, der in einem HTML-Dokument auf einen Anker namens section_2 zeigt:

 http://example.com/html/top.html#section_2

Ein Zielelement kann durch die :target-Pseudoklasse repräsentiert werden. Wenn der URI des Dokuments keinen Fragmentidentifikator besitzt, hat das Dokument kein Zielelement.”

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Praktische Anwendungen
Die Beispiele demonstrieren unterschiedliche Einsatzmöglichkeiten der :target-Pseudoklasse. Allerdings wird :target derzeit nur von neueren Gecko- (wie Firefox 1.5) und KHTML-Browsern (wie Safari) unterstützt.

Beispiel 1: Hervorheben
Der einfachste Fall für die Verwendung von :target besteht in einer simplen Umformatierung und Hervorhebung des Zielelements. Weniger technisch ausgedrückt: Nehmen wir an, wir versehen einige Absätze eines Dokuments mit IDs zur internen Referenzierung.

 <p id="einleitung">Lorem ipsum [...]</p>

Damit können wir diese bei Aufruf entsprechend anders gestalten, zum Beispiel in roter Farbe:

 p:target { color: #F00; }

Sind unsere Absätze normalerweise schwarz, so sorgt die :target-Pseudoklasse bei Aufruf des Dokuments mit einem beliebigen Fragmentidentifikator, der einen Absatz betrifft, dafür, dass der jeweils betroffene Abschnitt rot koloriert wird. Siehe Beispielseite.

Screenshot
Der über den Link aufgerufene Absatz wird rot hervorgehoben

Beispiel 2: Ein- und Ausblenden
Interessanter ist es, bestimmte Seitenelemente erst anzuzeigen, wenn diese mit einem internen Anker aufgerufen werden. Nehmen wir hierfür ein Element mit der ID hinweis:

 <div id="hinweis">Dies ist ein Hinweis.</div>

Zuerst einmal blenden wir dieses Element aus. Dazu genügt der Einsatz einer simplen Regel:

 div#hinweis { display: none; }

Verweist jemand direkt auf das Zielelement #hinweis, können wir den div-Container über :target wieder einblenden. Bei der Gelegenheit gestalten wir ihn auch gleich etwas prominenter, indem wir ein “em” Innenabstand injizieren:

 div#hinweis:target { display: block; padding: 1em; }

Das Ergebnis kann ebenfalls auf der Beispielseite betrachtet werden, jeweils mit und ohne Fragmentidentifikator #hinweis.

Diese Einsatzart der :target-Pseudoklasse birgt einige weitere interessante Spielarten. So könnte unser Hinweiselement auch noch einen Link auf dasselbe Dokument beinhalten – sofern nicht erneut mit dem Identifikator hinweis versehen -, um den Text wieder auszublenden. Durch Klick auf einen solchen Link greift der Selektor div#hinweis:target nicht mehr (die Beispielseite illustriert auch diesen Fall). Sieht dynamisch aus, ist aber “nur” CSS.

Beispiel 3: Umfassende Layoutänderung
:target kann selbstverständlich noch “radikaler” eingesetzt werden, indem man den Fokus – also das Zielelement – entsprechend groß wählt und die Formatierung umfassender ändert. Der folgende Ansatz soll dies veranschaulichen. Wir schenken dem html-Element eine ID:

 <html id="alternative"></html>

…und gestalten das dazugehörige Dokument bei Aufruf mitsamt Fragmentidentifikator #alternative um. Der Selektor selbst muss die ID alternative nicht beinhalten, wichtig ist nur, daß dem html-Element eine solche zugewiesen wurde und der Selektor natürlich :target beinhaltet.

 html:target { color: #060; font-size: 2em; }

Das Ergebnis ist ein einfacher CSS-“Stylesheet-Switcher”, der unsere Beispielseite mit großer, grüner Schrift präsentiert.

Screenshot
CSS-“Stylesheet-Switcher”

Aber Vorsicht. Das obige Beispiel geht mit IDs nicht wirklich korrekt um, da das html-Element die ID alternative eigentlich nur erfordert, wenn wir :target anwenden wollen. Obwohl es permanent als “alternativ” gekennzeichnet ist, ist es dies von der Semantik her jedoch nur zwischenzeitlich.

Sowohl Beispiel 2 als auch 3 sind zudem erstmal als “Spielerei” zu betrachten und vor einem praktischen und großflächigen Einsatz vor allem auf die Zugänglichkeit zu prüfen. Elemente, die wie dargestellt über display: none; aus- und einen die :target-Pseudoklasse beinhaltenden Selektor wieder eingeblendet werden, sind in Bildschirmlesesoftware genauso vorhanden wie jetzt noch im Internet Explorer – gar nicht. Wenn dies nicht verantwortet werden kann, bleibt nur das Warten auf den Reader-Medientyp und den Internet Explorer 7. Sofern er :target unterstützen wird.

Links zum Thema:

  • W3C zur Pseudoklasse
  • W3C über neue Selektoren
  • Der Reader-Medientyp

Erstveröffentlichung 19.01.2006

Jens Meiert

Jens Meiert

Informationsarchitekt und Autor (Webdesign mit CSS, O'Reilly), spezialisiert auf professionelle Webentwicklung, Barrierefreiheit und Usability, aktiv für W3C, UPA und IxDA.

Inhaltsverzeichnis

Agenturpartner in Allenwinden

Edit Content

minddraft

Kunden kommen zu uns mit einer Vision. Wir helfen Ihnen dabei, diese zu verwirklichen. Ganz egal ob simple Landingpage oder das nächste Instagram. Wir begleiten Sie von der Planung über das Design bis hin zur Entwicklung und den Betrieb.

— Marco Schaer,
Founder & Head of Design
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen