Cautare in site

Articol

Pseudo-elementele si pseudo-clasele in CSS

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)

formatarea-primei-litere-cu-CSS

  • :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)

formatarea-primei-linii-dintr-un-paragraf-cu-CSS

  • :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)

pseudo-elemntul-before

  • :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)

pseudo-elemntul-after

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

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.