Pseudo-Elemente

Pseudo-elementele sunt folosite pentru aedita stilul unei anumite parti a unui element.

De exmplu, putem folosi pseudo-elemente pentru:

• A modifica stilul primei litere a unui text, primei linii, etc
• A adauga continut inaintea sau la urma unui anumit element.

Sintaxa

Atentie! Aici se pune de doua ori caracterul :, spre deosebire de pseudo-clase unde puneam doar o data (ex:::first-line vs :first-line)

Pseudo-Elementul ::first-line

Acest pseudo-element este folosit pentru a adauga un stil mai special primei linii de text dintr-un anumit element HTML.

Acest alement poate fi aplicat doar elementelor de tip block.

Exemplu:Fomratam prima linie e fiecarui <div> din document:

?

1 2 3 4

div::first-line {     color: rgb(255, 0, 0);     font-family: Helvetica; }

Pseudo-Elementul ::first-letter

Acest pseudo-element este folosit pentru a adauga un stil mai special primei litere dintr-un anumit element HTML.

?

1 2 3 4

p::first-letter {     color: red;     font-size: 4em; }

Pseudo-Elemente si Clasele CSS

Pseudo-elementele pot fi combinate cu clase CSS.

Iata un exemplu simplu:

?

1 2 3 4

div.mainContent::first-letter {     color: rgb(255, 0, 0);     font-size: 2em; }

Acest cod va afisa prima litera a div-ului cu clasa mainContent rosie si de cu o marime a fontului de 200%.

Bineteles ca putem folosi si mai multe pseudo-elemente, precum in exemplul de mai jos:

?

1 2 3 4 5 6 7 8 9

div::first-letter {     color: rgb(255, 0, 0);     font-size: 2em; }   div::first-line {     color: rgb(0, 255, 0);     font-size: .7em; }

Pseudo-Elementul ::before

Acest pseudo-element poate fi folosit pentru a adauga continut ineintea continutului elementului HTML. Urmatorul exemplu adauga o imagine inaintea fiecarui element <h1>:

?

1 2 3

h1::before {     content: url('imagini/sageata.gif'); }

Pseudo-Elementul ::after

Acest pseudo-element poate fi folosit pentru a adauga continut dupa continutului elementului HTML. Urmatorul exemplu adauga o imagine dupa fiecare element <h1>:

?

1 2 3

h1::after {     content: url('imagini/sfarsit_rand.gif'); }

Pseudo-Elementul ::selection

Acest pseudo-element ne permite sa editam stilul selectiei utilizatorului.

Cu acest element nu functioneaza decat urmatoarele proprietati: color, background, cursor si outline.

?

1 2 3 4

::selection {     color: red;     background: green; }