Ultimele tutoriale de dezvoltare web
 

CSS pseudo-elementele

❮ precedent Capitolul următor ❯

Ce sunt Pseudo-Elements?

Un pseudo-element de CSS este folosit pentru stilul specificat părți ale unui element.

De exemplu, acesta poate fi utilizat pentru:

  • Stil prima literă, sau linie, a unui element
  • Inserare conținut înainte, sau după, conținutul unui element

Sintaxă

Sintaxa pseudo-elementele:

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

Observați notația de colon dublu - ::first-line comparativ :first-line

Dubla colon înlocuiește notația unică pentru colon-elemente pseudo în CSS3. Aceasta a fost o încercare de la W3C să se facă distincția între pseudo-clase și pseudo-elementele.

Sintaxa unică de colon a fost folosit pentru ambele pseudo-clase și-elemente pseudo în CSS2 și CSS1.

Pentru compatibilitate inversă, sintaxa unică de colon este acceptabil pentru pseudo-elementele CSS2 și CSS1.

::first-line Pseudo-elementul

::first-line pseudo-elementul este folosit pentru a adăuga un stil special de la prima linie a unui text.

Următorul exemplu formatează prima linie a textului în toate <p> elemente:

Exemplu

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Încearcă - l singur »

Notă: ::first-line pseudo-element poate fi aplicat numai pentru a bloca la nivel de elemente.

Următoarele proprietăți se aplică ::first-line pseudo-elementul:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter Pseudo-elementul

::first-letter pseudo-elementul este folosit pentru a adăuga un stil special de la prima literă a unui text.

Următorul exemplu formatează prima literă a textului în toate <p> elemente:

Exemplu

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Încearcă - l singur »

Notă: ::first-letter pseudo-element poate fi aplicat numai pentru a bloca la nivel de elemente.

Următoarele proprietăți se aplică ::first-letter pseudo- elementului:

  • font proprietăți
  • color proprietăți
  • background proprietăți
  • margin de proprietăți
  • padding proprietăți
  • border proprietăți
  • text-decoration
  • vertical-align (only if "float" is "none" ) în (only if "float" is "none" ) în care (only if "float" is "none" )
  • text-transform
  • line-height
  • float
  • clear

-elemente Pseudo și clase CSS

pseudo-elementele pot fi combinate cu clase CSS:

Exemplu

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
Încearcă - l singur »

Exemplul de mai sus va afișa prima literă de paragrafe cu class="intro" , în roșu și într - o dimensiune mai mare.

Elemente Pseudo-Multiple

Mai multe pseudo-elementele pot fi combinate.

În exemplul următor, prima literă a unui paragraf va fi de culoare roșie, într-o dimensiune font-xx mare. Restul prima linie va fi albastră, iar în mici-caps. Restul paragrafului va fi dimensiunea fontului implicit și culoarea:

Exemplu

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Încearcă - l singur »

CSS - Cu privire la ::before de Pseudo-elementul

::before de pseudo-element poate fi utilizat pentru a insera conținut înainte de conținutul unui element.

Următorul exemplu inserează o imagine înainte de conținutul fiecărui <h1> Element:

Exemplu

h1::before {
    content: url(smiley.gif);
}
Încearcă - l singur »

CSS - ::after Pseudo-elementul

::after pseudo-element poate fi utilizat pentru a insera conținut după conținutul unui element.

Următorul exemplu inserează o imagine după conținutul fiecărui <h1> Element:

Exemplu

h1::after {
    content: url(smiley.gif);
}
Încearcă - l singur »

CSS - ::selection Pseudo-elementul

::selection pseudo-elementul se potrivește porțiunea unui element care este selectat de către un utilizator.

Următoarele proprietăți CSS pot fi aplicate ::selection : color , background , cursor , și outline .

Exemplul următor face roșu text selectat pe un fundal galben:

Exemplu

::selection {
    color: red;
    background: yellow;
}
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 »

Toate CSS Pseudo Elemente

Selector Exemplu descriere exemplu
::after p::after Introduceți ceva după conținutul fiecărui <p> Element
::before p::before Introduceți ceva înainte de conținutul fiecărui <p> Element
::first-letter p::first-letter Selectează prima literă a fiecărui <p> Element
::first-line p::first-line Selectează prima linie a fiecărui <p> Element
::selection p::selection Selectează porțiunea unui element care este selectat de către un utilizator

Toate clasele CSS Pseudo

Selector Exemplu descriere exemplu
:active a:active Selectează link-ul activ
:checked input:checked Selectează fiecare verificat <input> Element
:disabled input:disabled Selectează fiecare dezactivat <input> Element
:empty p:empty Selectează fiecare <p> element care nu are copii
:enabled input:enabled Selectează fiecare activat <input> Element
:first-child p:first-child Selectează fiecare <p> elemente care este primul copil al societății - mamă
:first-of-type p:first-of-type Selectează fiecare <p> element care este primul <p> elementul părinte
:focus input:focus Selectează <input> elementul care are focalizarea
:hover a:hover Selectează link-uri pe mouse-ul peste
:in-range input:in-range Selectează <input> elemente cu o valoare într - un interval specificat
:invalid input:invalid Selectează toate <input> elemente cu o valoare nevalidă
: lang( language ) p: lang(it) Selectează fiecare <p> Element cu o valoare a atributului lang incepand cu "it"
:last-child p:last-child Selectează fiecare <p> elemente care este ultimul copil al părintelui său
:last-of-type p:last-of-type Selectează fiecare <p> element care este ultimul <p> elementul mamă
:link a:link Selectează toate link-urile nevizitate
: not(selector) : not(p) Selectează fiecare element care nu este un <p> Element
:nth- child(n) p:nth- child(2) Selectează fiecare <p> element care este al doilea copil al părintelui său
:nth-last- child(n) p:nth-last- child(2) Selectează fiecare <p> element care este al doilea copil al său părinte, numărând de la ultimul copil
:nth-last-of- type(n) p:nth-last-of- type(2) Selectează fiecare <p> element care este al doilea <p> elementul mamă, numărând de la ultimul copil
:nth-of- type(n) p:nth-of- type(2) Selectează fiecare <p> element care este al doilea <p> elementul părinte
:only-of-type p:only-of-type Selectează fiecare <p> element care este singurul <p> elementul mamă
:only-child p:only-child Selectează fiecare <p> element care este singurul copil al părintelui său
:optional input:optional Selectează <input> elemente fără "required" atribut
:out-of-range input:out-of-range Selectează <input> elemente cu o valoare în afara unui interval specificat
:read-only input:read-only Selectează <input> elemente cu "readonly" atribut specificat
:read-write input:read-write Selectează <input> elemente fără "readonly" în "readonly" atribut
:required input:required Selectează <input> elemente cu un "required" atributul specificat
:root root Selectează elementul rădăcină al documentului
:target #news:target Selectează curent activ #news elementul (clicked on a URL containing that anchor name) care (clicked on a URL containing that anchor name)
:valid input:valid Selectează toate <input> elemente cu o valoare validă
:visited a:visited Selectează toate link-urile vizitate

❮ precedent Capitolul următor ❯