CSS Izbirniki psevdo-razredov (ang. Pseudo-class selectors)

CSS Psevdo-razred je ključna beseda, dodana izbirniku, ki določa posebno stanje izbranih elementov. Psevdo-razred je sestavljen iz dvopičja (:), ki mu sledi ime psevdo-razreda. Funkcionalni psevdo-razred vsebuje tudi par oklepajev za definiranje argumentov. Element, na katerega je pritrjen psevdo-razred, je definiran kot sidrni element, na primer gumb v primeru gumb:hover. Psevdo-razredi nam omogočajo, da na elementu uporabimo slog, ne samo glede na vsebino dokumenta, ampak tudi glede na zunanje dejavnike, kot je zgodovina navigatorja (na primer :visited), stanje njegove vsebine ali položaj miške.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <title>Primer psevdo-razredov</title>
    <style>
        /* Osnovni stil povezave */
        a {
            text-decoration: none;
            padding: 5px 10px;
            display: inline-block;
        }

        /* Ko gremo z miško čez povezavo */
        a:hover {
            background-color: #fe5849!important;
            color: #333333;
        }

        /* Ko kliknemo na povezavo */
        a:active {
            color: #ff0000!important;
        }

        /* Za še neobiskane povezave */
        a:link {
            border-bottom: 2px solid #E06C75!important;
        }

        /* Za že obiskane povezave */
        a:visited {
            border-bottom: 2px solid #ff9f00!important;
        }

        /* Prvi odstavek znotraj div elementa */
        div p:first-child {
            font-weight: bold;
        }

        /* Zadnji element določenega tipa */
        p:last-of-type {
            font-style: italic;
        }

        /* Vsak drugi element */
        li:nth-child(2n) {
            background-color: orange!important;
            color: #333333!important;
            padding: 10px 5px;
        }
    </style>
</head>
<body>
    <div>
        <p>To je prvi odstavek (bo odebeljen).</p>
        <p>To je drugi odstavek.</p>
        <p>To je tretji odstavek (bo ležeč).</p>
    </div>

    <ul>
        <li>Prvi element</li>
        <li>Drugi element (siv)</li>
        <li>Tretji element</li>
        <li>Četrti element (siv)</li>
    </ul>

    <a href="#primer-povezave">Primer povezave</a>
</body>
</html>

REZULTAT

:active	Se uporablja za izbiro in oblikovanje aktivne povezave.	Glej primer
anchor	Povezave na spletnih straneh so lahko zelo različne.	Glej primer
:checked	Se ujema z vsakim označenim elementom <input>.	Glej primer
:disabled	Se ujema z vsakim onemogočenim elementom.	Glej primer
:empty	Se ujema z vsakim nepodrejenim elementom, vključno z besedilnimi vozlišči.	Glej primer
:enabled	Se ujema z vsakim elementom, ki je omogočen.	Glej primer
:first-child	Se uporablja za izbiro podanega izbirnika.	Glej primer
:first-of-type	Se ujema z vsakim elementom, ki je prvi podrejeni element.	Glej primer
:focus	Se uporablja za izbiro elementa, ki ima fokus.	Glej primer
:hover	Se uporablja za spremembo elementa.	Glej primer
:in-range	Izbere vse elemente z vrednostjo.	Glej primer
:invalid	Predstavlja kateri koli obrazec.	Glej primer
:lang	Se uporablja za izbiro elementov.	Glej primer
:last-of-type	Se ujema z vsemi elementi.	Glej primer
:link	Se uporablja za izbiro neobiskanih povezav.	Glej primer
:not	Se ujame z vsemi elementi, ki niso podani elementu/izbirniku.	Glej primer
:nth-child	Se ujema z vsemi elementi, ki so n-ti otroci svojega starša.	Glej primer
:nth-last-child	Se ujame z vsemi elementi, ki je n-ti otrok.	Glej primer
:nth-last-of-type	Se ujema z vsakim elementom, ki je n-ti podrejeni element.	Glej primer
:nth-of-type	Se ujema z vsakim elementom, ki je n-ti podrejeni element.	Glej primer
:only-child	Se ujame z vsemi elementi, ki so edini otrok svojega starša.	Glej primer
:only-of-type	Se ujema z vsakim elementom, ki je edini podrejeni element svojega starša.	Glej primer
:optional	Izbere neobvezne elemente obrazca.	Glej primer
:out-of-range	Izbere vse elemente z vrednostjo, ki je zunaj določenega obsega.	Glej primer
:read-only	Izbere elemente, ki so samo za branje.	Glej primer
:read-write	Izbere elemente obrazca, ki so berljivi.	Glej primer
:required	Izbere zahtevane elemente obrazca.	Glej primer
:root	Se ujema s korenskim elementom dokumenta.	Glej primer
:target	Lahko uporabimo za oblikovanje trenutnega aktivnega ciljnega elementa.	Glej primer
:valid	Izbere elemente obrazca z vrednostjo.	Glej primer
:visited	Se uporablja za izbiro obiskanih povezav.	Glej primer