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.
Informacje techniczne o selektorze :target
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor :target
Wyjaśnienie przykładowej reguły CSS
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>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>
