:target
- Data publikacji
- Ostatnio edytowano
Przeznaczenie selektora :target
:target { ... }
Selektor :target odwołuje się do elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :target.
Cechy elementu HTML spełniają zasadę pseudoklasy :target, gdy w danym momencie dany element HTML reprezentuje fragment treści, do którego przenieśliśmy się za pomocą adresu URI wskazującego bezpośrednio na wartość atrybutu id wspomnianego elementu HTML.
W tym samym dokumencie HTML w tym samym momencie maksymalnie tylko jeden element HTML może spełniać zasadę pseudoklasy ":target".
Informacje techniczne o selektorze :target
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor :target
p:target {
color:red;
}Wyjaśnienie przykładowej reguły CSS
p:target { color:red; }
p:target-
do każdego elementu
p, którego cechy w danym momencie spełniają zasadę pseudoklasy:target color-
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red-
na barwę czerwoną
Kod źródłowy przykładowego dokumentu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p:target {
color:red;
}
</style>
</head>
<body>
<ol>
<li>
<a href="#fragment-tresci-1">przenieś mnie do fragmentu treści "fragment-tresci-1"</a>
</li>
<li>
<a href="#fragment-tresci-2">przenieś mnie do fragmentu treści "fragment-tresci-2"</a>
</li>
<li>
<a href="#fragment-tresci-3">przenieś mnie do fragmentu treści "fragment-tresci-3"</a>
</li>
</ol>
<p id="fragment-tresci-1">
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
<p id="fragment-tresci-2">
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
<p id="fragment-tresci-3">
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
</p>
</body>
</html>Rezultat
- przenieś mnie do fragmentu treści "fragment-tresci-1"
- przenieś mnie do fragmentu treści "fragment-tresci-2"
- przenieś mnie do fragmentu treści "fragment-tresci-3"
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
w momencie gdy przeniesiesz się do fragmentu treści reprezentowanego przez zawartość tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
Interpretacja selektora :target
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji selektora :target.