Pseudo-razred :link

Z uporabo :link psevdo-razreda lahko oblikujemo povezave, ki jih uporabnik še ni obiskal. To je del skupine psevdo-razredov za oblikovanje povezav.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Psevdo-razred :link</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .primer {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }
        a:link {
            color: #0066cc!important;
            text-decoration: none;
            border-bottom: 1px dotted #0066cc;
            padding-bottom: 2px;
            transition: all 0.3s ease;
        }
        a:hover {
            color: #003366!important;
            border-bottom: 1px solid #003366;
        }
        .povezava-kartica {
            padding: 15px;
            margin: 10px 0;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: relative;
        }
        .povezava-kartica a {
            color: black!important;
        }
        .povezava-kartica a:hover {
            color: #003366!important;
        }
        .obvestilo {
            display: none;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #800080!important;
            font-size: 14px;
        }
        .obiskana .obvestilo {
            display: inline;
        }
        .obiskana a {
            color: #800080!important;
            border-bottom: 1px dotted #800080;
        }
    </style>
</head>
<body>
    <h1>Psevdo-razred :link</h1>
    
    <div class="primer">
        <div class="povezava-kartica">
            <a href="#vadnica" onclick="obiskanaPopravek(event, this)">Neobiskana povezava do vadnica.org</a>
            <span class="obvestilo">✓ Obiskana povezava</span>
        </div>
        
        <div class="povezava-kartica">
            <a href="#w3schools" onclick="obiskanaPopravek(event, this)">Neobiskana povezava do w3schools.com</a>
            <span class="obvestilo">✓ Obiskana povezava</span>
        </div>
        
        <div class="povezava-kartica">
            <a href="#jetbrains" onclick="obiskanaPopravek(event, this)">Neobiskana povezava do jetbrains.com</a>
            <span class="obvestilo">✓ Obiskana povezava</span>
        </div>
    </div>

    <script>
        // Ta JavaScript koda je potrebna samo za demonstracijo v iframe oknu
        function obiskanaPopravek(event, element) {
            event.preventDefault(); // Preprečimo privzeto obnašanje povezave
            const kartica = element.closest(".povezava-kartica"); // Najdemo starševski element
            kartica.classList.add("obiskana"); // Dodamo razred za vizualni prikaz obiskane povezave
        }
    </script>
</body>
</html>

REZULTAT

Opomba: JavaScript koda v tem primeru je uporabljena SAMO za namen demonstracije v iframe oknu. V realnem scenariju za delovanje psevdo-razreda :link JavaScript sploh ni potreben! Brskalnik sam poskrbi za pravilno stiliranje povezav s pomočjo :link psevdo-razreda. Ko uporabnik obišče povezavo v običajnem HTML dokumentu, bo brskalnik samodejno uporabil :visited psevdo-razred in spremenil stil povezave.