:target

Der Pseudo-Selektor :target in CSS gleicht ab, wenn der Hash in der URL und die ID eines Elements identisch sind. Wenn beispielsweise die aktuelle URL lautet

https://css-tricks.de/#voters

Und dies im HTML existierte

<section id="voters">Content</section>

Würde dieser Selektor übereinstimmen

:target { background: yellow; }

Und dieses section-Element hätte einen gelben Hintergrund.

Bei einem so generischen Selektor (der alles abgleicht, was gerade das Ziel ist), würde der Selektor erneut übereinstimmen und das #faq-Element hätte einen gelben Hintergrund, wenn sich die URL zu #faq ändern würde und es ein weiteres Element mit der ID faq gäbe.

Sie könnten dies einschränken, indem Sie spezifisch angeben, welche Elemente Sie ansprechen möchten, z. B. indem Sie das :target nach ID auswählen

#voters:target {
  /* Style it up */
}

Wann würden Sie das verwenden?

Eine Möglichkeit ist, wenn Sie mit "Zuständen" stylen möchten. Wenn die Seite einen bestimmten Hash hat, befindet sie sich in diesem Zustand. Es ist nicht ganz so vielseitig wie die Manipulation von Klassennamen (da es nur eine geben kann und sie nur mit einem Element verbunden sein kann), aber es ist ähnlich. Alles, was Sie tun könnten, indem Sie eine Klasse ändern, um den Zustand zu ändern, könnten Sie tun, wenn sich das Element in :target befindet. Zum Beispiel: Farben ändern, Position ändern, Bilder ändern, Dinge ausblenden/anzeigen, was auch immer.

Ich würde diese Faustregeln befolgen, wann :target eine gute Wahl ist

1. Wenn ein "Zustand" benötigt wird
2. Wenn das Sprung-/Hash-Link-Verhalten akzeptabel ist
3. Wenn es akzeptabel ist, den Browserverlauf zu beeinflussen

Wie bekommt man Hashes in URLs?

Der gebräuchlichste Weg ist, wenn ein Benutzer auf einen Link klickt, der einen Hash enthält. Es kann ein interner (auf derselben Seite) Link oder eine vollständig qualifizierte URL sein, die zufällig mit einem Hash und einem Wert endet. Beispiele

<a href="#voters">Go To There</a>

<a href="http://example.com/#specific-part">Go To There</a>

Sprungverhalten

Unabhängig davon, ob es sich um einen Link auf derselben Seite handelt oder nicht, **ist das Browserverhalten, dass die Seite gescrollt wird, bis dieses Element am oberen Rand der Seite ist**. Oder so weit wie möglich, wenn es nicht so weit scrollen kann. Das ist ziemlich wichtig zu wissen, denn es bedeutet, dass die Ausnutzung dieses "dekorierten" Verhaltens etwas knifflig/begrenzt ist.

Zum Beispiel habe ich einmal verschiedene Techniken ausprobiert, um funktionale CSS-Tabs zu replizieren, aber letztendlich entschieden, dass die Verwendung des Checkbox-Hacks eine bessere Idee war, da es die Probleme mit Seitenwechseln vermeidet. Ian Hansson von CSS Science hat auch einige Beispiele für Tabs. Sein drittes Beispiel verwendet :target und absolut positionierte Elemente, die oberhalb des Seitenrands versteckt sind, um das Seitenwechselverhalten zu verhindern. Es ist clever, aber keine perfekte Lösung insgesamt, da die Seite nach oben springen würde, wenn sich die Tabs weiter unten auf einer Seite befinden würden.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
9	Alle	Alle	Alle	Alle	Alle

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Alle	Alle	Alle	Alle

Weitere Informationen

• Selectors Level 4 specification
• On :target (CSS-Tricks)
• CSS :target for off screen designs (CSS-Tricks)
• Using the :target pseudo-class in selectors (MDN)
• A simple image gallery using :target (Chris Heilmann)
• Demo: Yellow fade technique (Web Designer Notebook)