Ostatnio edytowany:

:visited

Autor: Virtual Patriot

Przeznaczenie selektora :visited

      :visited { ... }
    

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

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

Dodatkowe techniczne informacje o selektorze :visited

ograniczenie - elementy HTML
ograniczenie - właściwości CSS
  • Tylko następujące właściwości CSS: color. Ponadto jakakolwiek inna wartość procentu przezroczystości koloru niż wartość 100% jest ignorowana przez przeglądarkę internetową.

    Każda przeglądarka internetowa może posiadać swój własny dodatkowy zbiór właściwości CSS, które możemy wykorzystać wraz z selektorem ":visited".

Przykładowa reguła CSS, selektor :visited

a:visited {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      a:visited { color:red; }
    
a:visited

Do każdego elementu a, który prowadzi do zasobu internetowego, który został już 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:visited {
        color:red;
      }
    </style>
  </head>

  <body>

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

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

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

    <p id="fragment-zawartosci-a">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-zawartosci-a"</p>
    <p id="fragment-zawartosci-b">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-zawartosci-b"</p>
    <p id="fragment-zawartosci-c">przykładowy zasób internetowy w postaci fragmentu treści o identyfikatorze "fragment-zawartosci-c"</p>

  </body>
</html>

Rezultat

Interpretacja selektora :visited

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak