Pseudo-elementele si pseudo-clasele in CSS
Cu ajutorul regulilor de stil CSS putem defini si acele elemente care nu se regasesc efectiv in codul paginii. Pentru acest scop putem folosi pseudo-elementele. In schimb pentru formatarea fazelor unui element existent vom folosi pseudo-clasele.
Vom incepe analiza noastra cu pseudo-elementele pentru ca apoi sa vedem diferentele dintre acestea si pseudo-clasele prevazute in standardul CSS.
» Ce sunt pseudo-elementele CSS?
Acestea sunt prevazute in limbajul CSS pentru a defini anumite parti ale unui document HTML care nu sunt reprezentate de un element HTML.
» Care sunt pseudo-elementele prevazute de variile versiuni CSS?
Standardul CSS defineste 4 pseudo-elemente:
- :first-letter: formateaza prima litera a textului continut intr-un element (paragraf, div, etc);
Exemplu de aplicare a acestui pseudo-element asupra tag-ului paragraf:
p:first-letter { color: #09F; font-weight: bold; font-size: 30px; }
Rezultat: (click pe imaginea de mai jos pentru a o mari)
- :first-line: formateaza prima linie a textului continut intr-un element (paragraf, div, etc);
Exemplu de aplicare a acestui pseudo-element asupra tag-ului paragraf:
p:first-line { color: #C00; font-weight: bold; font-size: 30px; }
Rezultat: (click pe imaginea de mai jos pentru a o mari)
- :before: insereaza un continut inainte de un anumit element;
Exemplu de aplicare a acestui pseudo-element asupra tag-ului paragraf:
p:before { content: "1"; display: inline-block; width: 70px; height: 30px; padding: 3px; border: 1px solid #999; margin-right: 5px; text-align: center; background-color: #0CF; color: #FFF; }
Rezultat: (click pe imaginea de mai jos pentru a o mari)
- :after: insereaza un continut dupa un anumit element.
Exemplu de aplicare a acestui pseudo-element asupra tag-ului paragraf:
p:after { content: "1"; display: inline-block; width: 70px; height: 30px; padding: 3px; border: 1px solid #999; margin-right: 5px; text-align: center; background-color: #0CF; color: #FFF; }
Rezultat: (click pe imaginea de mai jos pentru a o mari)
Standardul CSS3 a introdus un nou pseudo-element:
- :selection: care formateaza textul selectionat.
Detalii despre cum poate fi configurat acest pseudo-element si rezultatul pe care il produce puteti vedea in acest articol: Personalizarea culorii de selectie cu CSS. Desi ulterior acest pseudo-element a fost scos din standardul CSS este in continuare suportat de toate browserele.
Specifica CSS3 a introdus o alta noutate in ceea ce priveste sintaxa. In noua versiune pseudo-elementele se definesc scriind de doua ori semnul doua puncte (::) in loc de o singura data (:). Aceasta modificare a fost facuta pentru a distinge pseudo-elementele de pseudo-clase care se definesc scriind o singura data doua puncte (:).
Pentru a mentine compatibilitatea browserele web respecta amble sintaxe. Pentru a respecta ultimul standard CSS va trebui deci sa scriem pseudo-elementele in acest mod:
::first-letter
::first-line
::before
::after
» Ce sunt pseudo-clasele in CSS?
Acestea nu definesc prezentarea unui element ci o faza anume a acestuia. In acest caz elementul exista in pagina html iar cu ajutorul pseudo-claselor definim fazele interactiunii.
Cele mai utilizate pseudo-clase sunt acelea pentru formatarea variilor faze ale unui link care sunt :link (prezentarea initiala a unui link), :visited (prezentarea unui link vizitat), :hover (prezentarea unui link in momentul in care trecem mouse-ul peste el) si :active (prezentarea unui link in momentul in care facem click pe el).
Exemplu:
a:link, a:visited { color: #C03; text-decoration: none; } a:hover, a:active { color: #906; }
Alte pseudo-clase:
:focus : prezentarea unui element in momentul in care se interactionaeza cu acesta punandu-l in focus, de exemplu in cazul campurilor unui formular web. In exemplul de mai jos schimbam culoarea de fundal a unui camp de text de input atunci cand se pozitioneaza cursorul inauntrul acestuia.
Exemplu:
input:focus {background: blue;}
In momentul in care cursorul mouse-ului nu se mai gasete in interiorul acelui camp de text, deci isi pierde proprietatea de focus, culoarea de fundal revine la normal.
:first-child : cu ajutorul acestei pseudo-clase putem formata primul element (numit si first child) care se gaseste in interiorul unui alt element. De exemplu putem formata primul paragraf din interiorul unui div.
Exemplu:
HTML:
<div> <p>Primul paragraf dintr-un div</p> <p>Al doilea paragraf dintr-un div</p> </div>
CSS:
p:first-child {color: black;}
Nu sunt comentarii