CSS3 - Pseudo elementi (Pseudo-elements)


Šta je pseudo-element (Pseudo-elements)?

CSS pseudo-elementi omogućavaju vam oblikovanje elemenata ili dijelova elemenata bez dodavanja bilo kakvih ID-ova ili klasa (class). Biće zaista korisno u situacijama kada samo želite stilizovati prvo slovo odlomka kako biste stvorili efekt kapice ili želite umetnuti neki sadržaj prije ili poslije elementa itd. samo kroz tabelu stilova. CSS3 je predstavio novu dvostruku dvotačku (::) sintaksu za pseudo-elemente kako bi se napravila razlika između njih i pseudo-klasa. Nova sintaksa pseudo-elementa može se napisati kao:

selector::pseudo-element { property: value; }

Ovo su sljedeći najčešće korišteni pseudo-elementi:



Pseudo-element ::first-line

Pseudo-element ::first-line primjenjuje poseban stil na prvi red teksta. Pravila stila u sljedećem primjeru oblikuju prvi red teksta u odlomku. Dužina prvog reda zavisi o veličini prozora pretraživača ili sadrži element.

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS ::first-line Pseudo-element</title>
<style> 
    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
</style>
</head>
<body>        
    <p>
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    Prvi red ovog odlomka stilizovan je drugačije od ostatka reda.
    </p>
</body>
</html>


Pseudo-element ::first-letter

Pseudo-element ::first-letter koristi se za dodavanje posebnog stila prvom slovu prvog reda teksta. Pravila stila u sljedećem primjeru formatiraju prvo slovo odlomka teksta i stvaraju efekt poput kapice.

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS ::first-letter Pseudo-element</title>
<style> 
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }
</style>
</head>
<body>        
    <p>Prvi red ovog paragrafa stilizovan je drugačije od ostatka reda.</p>
</body>
</html>


Pseudo-elementi ::before i ::after

Pseudo-elementi ::before i ::after mogu se koristiti za umetanje generisanog sadržaja prije ili poslije sadržaja elementa. Svojstvo CSS sadržaja koristi se zajedno s ovim pseudo-elementima za umetanje generisanog sadržaja. Ovo je vrlo korisno za dalje ukrašavanje elementa s bogatim sadržajem koji ne bi trebao biti dio stvarnog označavanja stranice. Pomoću ovih pseudo-elemenata možete umetnuti redovne stringa teksta ili ugrađeni objekt kao što su slika i drugi resursi.

h1::before {
    content: url("images/marker-left.gif");
}
h1::after {
    content: url("images/marker-right.gif");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS ::before and ::after Pseudo-element</title>
<style> 
    h1::before {
        content: url("/examples/images/marker-left.gif");
    }
    h1::after {
        content: url("/examples/images/marker-right.gif");
    }
</style>
</head>
<body>        
    <h1>IT TUTORIJALI</h1>
</body>
</html>


Pseudo-elementi i CSS klase

Uopšteno trebamo stilizovati samo određeni odlomak teksta ili druge elemente na nivou bloka s tim pseudo-elementima. Tu na scenu stupa deklaracija klase pseudo-elementu. Pseudo-elementi se mogu kombiniovati s CSS klasama kako bi se postigao efekt posebno za elemente koji imaju tu klasu. Pravila stila u sljedećem primjeru prikazaće prvo slovo svih pasusa s class="article", zelene boje i veličine xx-large.

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer korištenja CSS Pseudo-element sa kalsama (class)</title>
<style> 
    p.article::first-letter {
        color: #00ff00;
        font-size: xx-large;
    }
</style>
</head>
<body>        
    <p class="article">IT TUTORIJALI.</p>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>