CSS Izbirniki psevdo-elementov (ang. Pseudo-elements selectors)

CSS psevdo-element je ključna beseda, dodana izbirniku, ki nam omogoča stiliziranje določenega dela izbranih elementov. Za psevdoelemente se uporabljajo dvojna dvopičja (::), kar jih razlikuje od psevdo-razredov, ki v svojem zapisu uporabljajo enojno dvopičje (:). V izbirniku lahko uporabimo samo en psevdoelement, ki se mora pojaviti za vsemi drugimi komponentami v kompleksnem ali sestavljenem izbirniku.Na primer, lahko izberemo prvo vrstico odstavka z uporabo ::first-line ne pa tudi podrejenih elementov prve vrstice ali prve vrstice, ki se premakne. Tako sta p::first-line in p::first-line:hover neveljavna. Medtem ko elementa ni mogoče izbrati na podlagi njegovega stanja z uporabo psevdoelementov, lahko psevdoelement uporabimo za izbiro in oblikovanje dela elementa.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <style>
        /* Prvi znak */
        p::first-letter {
            font-size: 30px;
            font-weight: bold;
            color: #ff6b6b!important;
        }

        /* Prva vrstica */
        p::first-line {
            color: #4CAF50!important;
            font-style: italic;
        }

        /* Besedilo pred elementom */
        h1::before {
            content: ">>";
            padding-right: 5px;
            color: #fe5849!important;
        }

        /* Besedilo za elementom */
        h1::after {
            content: "<<";
            padding-left: 5px;
            color: #fe5849!important;
        }

        /* Označeno besedilo */
        ::selection {
            background-color: #ffd32a!important;
            color: #2c3e50!important;
        }

        /* Osnovni stili za lepši prikaz */
        body {
            font-family: Arial, sans-serif;
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

        body h1 {
            color: #a687ed!important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body p {
            line-height: 1.6;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Psevdo-elementi v CSS</h1>
    <p>Ta odstavek ima posebej oblikovano prvo črko in prvo vrstico. Poskusi označiti to besedilo z miško, da vidiš 
    učinek ::selection psevdo-elementa. Ta odstavek je dovolj dolg, da pokaže učinek first-line na prvi vrstici.</p>
    <p>Tudi ta odstavek ima enake učinke. Prvi znak je večji in rdeč. Prva vrstica je modra in poševna. Izbrano besedilo 
    ima rumeno ozadje.</p>
</body>
</html>

REZULTAT

Najbolj pogosto uporabljeni psevdo-elementi vključujejo ::before in ::after za dodajanje vsebine pred ali za elementom, ::first-letter za oblikovanje prve črke, ::first-line za oblikovanje prve vrstice besedila ter ::selection za prilagajanje videza označenega besedila. Ti psevdo-elementi nam omogočajo natančno nadzorovanje in oblikovanje določenih delov HTML elementov brez potrebe po dodatnem označevanju v HTML kodi. Pomembno je vedeti, da nekateri psevdo-elementi delujejo samo na določenih elementih - na primer, ::first-line in ::first-letter delujeta samo na blokovnih elementih. Z uporabo lastnosti content v kombinaciji s psevdo-elementi ::before in ::after lahko dodajamo dekorativne elemente ali pomembne oznake, ne da bi spreminjali strukturo HTML dokumenta.

::after	Vstavi nekaj za vsebino vsakega izbranega elementa.	Glej primer
::before	Vstavi nekaj pred vsebino vsakega izbranega elementa.	Glej primer
::first-letter	Se uporablja za dodajanje sloga prvi črki podanega izbirnika.	Glej primer
::first-line	Se uporablja za dodajanje sloga prvi vrstici podanega izbirnika.	Glej primer
::marker	Izbere oznako elementa seznama.	Glej primer
::selection	Se ujema z delom elementa, ki ga izbere uporabnik.	Glej primer