CSS/Selektoren/target
Der Begriff target ist mehrdeutig.Für
- das target-Attribut siehe HTML/Attribute/target
- die JavaScript-Eigenschaft event.target.
Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.
- Syntax
:target
a:target {
color: red;
}
:target wieder sichtbar gemacht werden. Durch einen weiteren Klick auf einen anderen Link verliert die Infobox das :target und wird wieder unsichtbar.
Diese Technologie versuchte, Benutzerinteraktionen in einer reinen CSS-Lösung ohne JavaScript zu realisieren.
Eine Infobox mit :target bewirkte, dass die Browser-Historie vollgemüllt wird. Ein Klick auf die Pfeil-zurück-Taste brachte den Nutzer nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.
Heute werden Aufklapp-Mechanismen mit den nativen details- und dialog-Elementen, dem popover-Attribut oder wenigen Zeilen JavaScript realisiert:
--Matthias Scharwies (Diskussion) 17:36, 28. Mai 2023 (CEST)
Siehe auch
- HTML/Tutorials/Links/Referenzieren in HTML
- Autorennen: CSS-Animation, ausgelöst durch
:target
Weblinks
- W3C: Selectors Level 4
- Browser-Support: caniuse.com
- dynamische Pseudoklassen
- :active
- :any-link
- :autofill
- :buffering
- :checked
- :default
- :defined
- :disabled
- :enabled
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :link
- :modal
- :muted
- :not()
- :open
- :optional
- :out-of-range
- :picture-in-picture
- :placeholder-shown
- :popover-open
- :read-only
- :read-write
- :required
- :target
- :target-current
- :user-invalid
- :user-valid
- :valid
- :visited
- :where()
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
- strukturelle Pseudoklassen
Anwendungsbeispiel
: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.
