Šta su pseudo elementi?

• Pored pseudo klasa, pojavljuju se i pseudo elementi

(pseudo-elements) koji se ne odnose na specijalna
stanja, već na delove samih elemenata, pri čemu se ti
delovi ne pojavljuju u stablu dokumenta.
• Na primer, pseudo elementom možemo izdvojiti i
posebno stilizovati samo prvo slovo određenog
paragrafa. Iako je paragraf jedinstven element u HTML
stablu, ipak možemo pseudo elementom izdvojiti samo
jedan njegov deo, koje to isto HTML stablo ne
prepoznaje kao element.
 Postavljanje pseudo elemenata
• Dok se pseudo klase mogu pojaviti na bilo kom
mestu u selektoru i mogu se kombinovati,
pseudo selektori se uvek pojavljuju na kraju
selektora.
• Itekako se mogu kombinovati pseudo klasa i
pseudo element, ali pseudo element mora biti
na kraju selektora.
 :first-letter
Selektuje prvo slovo u okviru elementa radi
posebne stilizacije. Uglavnom se koristi za drop-
cap (tkzv inicijale).  Možemo postaviti na primer:
p:first-letter  {  color:red; }
Tako ćemo obojiti u crveno samo prvo slovo svakog paragrafa u
dokumentu. Možemo izmeniti donekle selektor i napisati specifičnije:

#blog p:first-of-type:first-letter  {
color:red;
font-size:50px;
font-weight:bold;
line-height:50px;
float:left;
display:block;
margin:0 5px 0 0;
}
Ako obratimo pažnju na selektor u primeru,
primetićemo da je postavljena kombinacija pseudo
klase :first-of-type i pseudo elementa :first-letter.
Klasom izdvajamo prvi paragraf u okviru #blog div-a,
a pseudo elementom preciziramo i ograničavamo se
na samo jedno slovo teksta. Bez first-of-type svaki
paragraf bi počinjao velikim slovom.
 :first-line
• Slično prethodnom, ali selektuje prvi red teksta
umesto prvog slova.
• Obratite pažnju na to da nije reč o prvom
paragrafu, već o prvom vidljivom redu teksta.
Ukoliko se promeni širina okružujućeg elementa i
tekst se drugačije prelomi, opet samo prvi vidljivi
red ostaje stilizovan, pogođen ovim.
 ::selection
• Omogućuje da promenimo stilizaciju označenog
(selektovanog teksta).
• Ovaj pseudo element funkcioniše u većini
modernih browsera. U je IE podržan od verzije 9 i
u novijima, ali je zanimljivo da ga trenutno
aktuelna verzija Firefoxa ne podržava. Za Firefox
možemo koristiti varijantu sa prefiksom:
::-moz-selection
 ::selection
::-moz-selection {
background: #76bf32;
color:#fff;
text-shadow: none;
}

::selection {
background: #76bf32;
color:#fff;
text-shadow: none;
}
 ::after i ::before
• Ovi pseudo elementi, uvedeni u CSS3
specifikaciju, omogućavaju da kroz CSS na neki
način unesemo, upišemo element u HTML.
• Sa jedne strane, taj fiktivni, pseudo element koji
kreiramo i unosimo nije deo DOM-a, ali se
prikazuje i ponaša kao da jeste. 
• Uz njih, moramo koristiti i svojstvo content preko
koga određujemo sam unet sadržaj.
Ukoliko u HTML dokumentu postavimo sledeći kod:
<p id="alpha">Alpha</p>
<p id="beta">Beta</p>
Dobijamo:
A u CSS-u postavimo:
#alpha, #beta {
 background:#FF6;
 padding:10px;
}
Ali sa druge strane, ukoliko bez promene HTML-
a, na postojeći CSS dodamo pored postojećeg,
još jedan opis:
Dobijamo:

#alpha:after {
 content:" + CSS text!"
}
Prikaz u browseru se menja.
• Primećujemo da smo u CSS kodu upisali novi opis,
i koristili pseudo element ::after.
• U tom novom opisu smo upisali svojstvo content.
U okviru tog svojstva content, data vrednost pod
navodnicima će biti “ugrađena” u HTML. 
• Mi ne upisujemo bukvalno ništa u HTML
dokument, već samo fiktivno dodajemo sadržaj. 
• Pri tom, taj uneti sadržaj kroz CSS prilikom
prikaza, nije van elementa, već unutar njega,
unutar njegovog taga. 
U prethodnom primeru, prikaz je kao da smo uneli ovakav
HTML:

<p id="alpha">Alpha + CSS text!</p>

<p id="beta">Beta</p>

Iako je realno još uvek samo:

<p id="alpha">Alpha</p>
<p id="beta">Beta</p>
• Unutar content svojstva kao vrednost možemo
postaviti tekst (kao što smo u primeru iznad
uradili), sliku (kao kod background slika) ili
neku vrednost atributa elementa.
• Ono što ne možemo postaviti je html tag niti
bilo šta slično. Verovatno bi bilo korisno
postaviti novi div ili možda span tag, možda sa
sve klasom, ali to (za sada) nije moguće.
 :before
• Drugi pseudo element iz ove grupe je :before i
on se ponaša na veoma sličan način.
• Jedina razlika je što se njegov fiktivni sadržaj
postavlja pre realno unetog sadržaja.
 Upotreba
• Sada se verovatno pitate čemu to služi? Zašto
bi uopšte nekad koristio after ili before? Iako
možda deluje trivijalno i nepotrebno, ipak
postoje mnoge situacije kada ovi pseudo
elementi mogu biti više nego korisni.
Pogledajmo za početak jedan primer.
 Upotreba
• Već smo se upoznalli sa selektorima atributa.
• Sada možemo pomoću njih detektovati
eksterni link i postaviti pomoću :after
elementa vidljivu naznaku da to jeste eksterni
link koji vodi van trenutnog sajta.
U HTML-u bismo možda imali klasične linkove:

<a href="index.html">Home page</a> 

<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a> 
<a href="first.html">First</a>  
<a href="second.html">Second</a>

Primetićete da drugi i treći link upućuju na absolutne adrese

van konkretnog sajta. Osim toga, nema posebnih klasa ili
atributa.
U CSS-u možemo pisati:
a[href*="http://"]:after {
 content:" [external link]";
}
Prvo smo postavili selektor atributa koji je ograničio
selekciju na eksterne linkove, ali i dodali smo :after
pseudo element, kako bismo dodali tekst objašnjenja.
Sada će se naznaka [external link] pojaviti samo kod
eksternih linkova bez dodavanja HTML koda. 
Uz korekciju i dodavanje još nekoliko CSS opisa i svojstava:

a{ a[href*="http://"]:after {
 display:block;  content:" [external link]";
 text-decoration:none;  text-transform:uppercase;
 color:#099;  font-size:0.6em;
}  color:#ccc;
}
a:hover { color:#F93; }
možemo dobiti nešto poput prikaza na sledećoj slici:

Možemo korigovati ovaj primer – da umesto eksternog linka

prikazuje putanju do koje vodi link kada se mišem pređe preko
njega. Tada bi content svojstvo bilo na primer:
content:" - "attr(href);
 Napomena o pseudo elementima
• Možda ćete primetiti da se ponekad pseudo
elementi (samo pseudo elementi, ne i pseudo
klase) pojavljuju u obliku ::after, a nekad u
obliku :after. U čemu je razlika ukoliko je ima?
Da li je potrebno pisati dve dvotačke ili je
samo jedna dovoljna?
 Šta kaže W3C
Oznaka :: uvedena je u ovom dokumentu da bi se
uspostavila razlika između pseudo-klasa i pseudo-
elemenata.
Radi kompatibilnosti sa postojećim stilovima, korisnički
agenti takođe moraju prihvatati ranije označavanje uz
jednostruke dve tačke iz CSS nivoa 1 i 2 (konkretno,:first-
line,:first-letter,:before i :after).
Ova kompatibilnost nije dozvoljena za nove pseudo-
elemente koje donosi CSS nivo 3.
Po W3C i trenutno aktuelnoj zvaničnoj specifikaciji (u
okviru CSS3), za pseudo elemente koristi se varijanta sa
duplim dvotačkama (::), dok se za pseudo klase koristi
jedna dvotačka (:) , ali nije sve baš tako jednostavno.

Pre par godina (CSS 1 i 2), nije postojalo to pravilo i tada

su se i pseudo klase i elementi pisali isto, sa samo jednom
dvotačkom. Zbog toga, neki stariji browseri (IE8) ne
prepoznaju drugu mogućnost i dozvoljena je upotreba
obe varijante za starije pseudo elemente. Oni pseudo
elementi koji su uvedeni sa CSS3 specifikacijom, moraju
se pisati u novoj varijanti.
 Drugim rečima..
Možemo koristiti obe varijante za starije
elemente koji su uvedeni tokom verzija 1 i 2, kao
što su ::after, ::before i sl, dok se za nove CSS3
pseudo elemente, kao što je npr
::selection mora koristiti varijanta sa ::
Danas, svaki browser koji prepoznaje duple
dvotačke (::) iz CSS3 sintakse, takođe prepoznaje i
stariju (:) sintaksu.

Podsetiću da se ovo odnosi na pseudo elemente,

dok se pseudo klase uvek pišu i dalje sa (:), kako će
i ostati. Dve dvotačke (::) su uvedene samo da bi se
pseudo elementi razlikovali od pseudo klasa.
 Još par reči o selektorima
Naravno, ovde se priča o selektorima ne završava.
Uvek možemo (često bespotrebno) zakomplikovati
naše selektore ako to želimo. U većini situacija
jednostavan selektor je dovoljan i preporučljiv.
Bolje je koristiti npr:
#header a 
nego 
div.header-container > div:first-child > ul > li > a
da bismo dobili isti rezultat.
 Još par reči o selektorima
• Više detalja i samu specifikaciju selektora možemo naći na
zvaničnom W3C sajtu, odnosno na linku: http
://www.w3.org/TR/css3-selectors/#selectors
• Sve u svemu, treba se truditi da naši selektori ne komplikuju suviše
naš kod i, naravno, treba razmišljati o eventualnim kasnijim
izmenama. Na primer, Adjacent sibling selektor ima veće šanse da
napravi problem na sajtu u kasnijim izmenama od direktno
postavljene klase, i sl. Ne možemo predvideti šta će se sve dešavati
u budućnosti sa našim sajtom, pogotovo ako neko drugi bude vršio
izmene, ali u svakom slučaju, trebamo se truditi da naš kod bude što
lakši i elegantniji, kako se to obično čuje među programerima i
developerima.