Autor publikacji: Virtual Patriot - Administrator

:link

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the :link pseudo-class (LV3)

Przeznaczenie selektora `:link`

      :link { ... }

Selektor :link odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :link.

Cechy elementu HTML spełniają zasadę pseudoklasy :link, gdy w danym momencie dany element HTML jest nieodwiedzonym linkiem, czyli takim elementem HTML, który prowadzi do zasobu internetowego, który nie został jeszcze odwiedzony przez danego użytkownika.

Informacje techniczne o selektorze `:link`

ograniczenie - elementy HTML

element a
element area

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:link`

a:link {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      a:link { color:red; }

a:link: do każdego elementu a, który prowadzi do zasobu internetowego, który nie został jeszcze przez nas odwiedzony
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>
      a:link {
        color:red;
      }
    </style>
  </head>

  <body>

    <ol>
      <li>
        <a href="#fragment-tresci-1">jeżeli ten element "a" prowadzi do zasobu internetowego, który nie został jeszcze przez nas odwiedzony, tekst znajdujący się w zawartości tego elementu "a" będzie koloru czerwonego</a>
      </li>

      <li>
        <a href="#fragment-tresci-2">jeżeli ten element "a" prowadzi do zasobu internetowego, który nie został jeszcze przez nas odwiedzony, tekst znajdujący się w zawartości tego elementu "a" będzie koloru czerwonego</a>
      </li>

      <li>
        <a href="#fragment-tresci-3">jeżeli ten element "a" prowadzi do zasobu internetowego, który nie został jeszcze przez nas odwiedzony, tekst znajdujący się w zawartości tego elementu "a" będzie koloru czerwonego</a>
      </li>
    </ol>

    <p id="fragment-tresci-1">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-tresci-1"</p>
    <p id="fragment-tresci-2">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-tresci-2"</p>
    <p id="fragment-tresci-3">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-tresci-3"</p>

  </body>
</html>