Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » CSS 3: Die :target-Pseudoklasse

CSS 3: Die :target-Pseudoklasse

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...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Jens Meiert
  • 19. Januar 2006
Bookmarke mich
Share on pocket

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.”

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Webdesign DOERRER

Frankfurt am Main

BIZ Digital Marketing

Nürtingen

Webagentur klickbeben

Innsbruck

NETZhelfer GmbH

Ostfildern

DRWA Das Rudel Werbeagentur

Freiburg im Breisgau

Alle Agenturpartner

Jobs

Assistent/in der Geschäfts­führung

Innsbruck

Inside Sales Manager

Karlsruhe

SEA Manager in München

München

Teamleiter Online Marketing

München

Projektmanager – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.