Ostatnio edytowany:

:target

Autor: Virtual Patriot

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 do interesującego nas fragmentu treści występującego w zawartości danego dokumentu HTML przenieśliśmy się za pomocą adresu URI, który wskazuje bezpośrednio na wartość atrybutu id elementu HTML reprezentującego wspomniany fragment treści.

W tym samym dokumencie HTML w tym samym momencie maksymalnie tylko jeden element HTML może spełniać zasadę pseudoklasy ":target".

Dodatkowe techniczne informacje 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-zawartosci-1">przenieś mnie do fragmentu treści "fragment-zawartosci-1"</a>
      </li>

      <li>
        <a href="#fragment-zawartosci-2">przenieś mnie do fragmentu treści "fragment-zawartosci-2"</a>
      </li>

      <li>
        <a href="#fragment-zawartosci-3">przenieś mnie do fragmentu treści "fragment-zawartosci-3"</a>
      </li>
    </ol>

    <p id="fragment-zawartosci-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-zawartosci-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-zawartosci-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

  1. przenieś mnie do fragmentu treści "fragment-zawartosci-1"
  2. przenieś mnie do fragmentu treści "fragment-zawartosci-2"
  3. przenieś mnie do fragmentu treści "fragment-zawartosci-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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .