Obțineți mai multă putere asupra design-urilor dvs. web folosind acești selectori CSS avansati.

CSS acceptă o varietate de selectoare pentru a identifica elementele pentru stil, fiecare cu propriul set de reguli. În timp ce majoritatea metodelor de selecție sunt simple, pseudo-clasele și pseudo-elementele oferă mai multă flexibilitate. Vă permit să selectați elemente în funcție de starea sau poziția lor într-o structură sau selectează anumite porțiuni de conținut.

Acești selectori pot fi dificil de utilizat și este ușor să amesteci pseudo-clase cu pseudo-elemente, deci cum le diferențiezi?

Înțelegerea Pseudo-claselor CSS

O pseudo-clasă CSS este ca un cuvânt cheie special pe care îl puteți folosi cu selectoare pentru a stila elementele în moduri diferite. Aceste cuvinte cheie vă ajută să vizați elemente atunci când se întâmplă anumite lucruri, cum ar fi când un utilizator trece mouse-ul peste un element, dă clic pe acesta sau introduce ceva într-un câmp de introducere.

Pseudo-clasele vă fac pagina web mai interactivă și mai receptivă, schimbând modul în care arată sau se comportă elementele în funcție de acțiunile utilizatorului. Cand tu

instagram viewer
folosiți-le cu alte selectoare CSS, oferă un control precis asupra stilului și interactivitatii.

Sintaxă și utilizare pseudo-clasă CSS

Sintaxa pentru o pseudo-clasă CSS constă din două puncte (:) urmată de numele unei pseudo-clase. Iată sintaxa de bază:

selector:pseudo-class {
/* styles */
}

În această sintaxă:

  • selector se referă la elementul sau elementele cărora doriți să le selectați și să le aplicați stiluri. Poate fi un element HTML, o clasă, un ID sau un selector mai complex, cum ar fi o combinație. Selectorul este opțional, dar de obicei veți folosi unul; fără ea, pseudo-clasa ta va viza toate elementele la care se poate aplica.
  • pseudo-clasă este cuvântul cheie care reprezintă o anumită stare sau condiție pe care doriți să o vizați.

CSS clasifică pseudo-clasele în mai multe grupuri în funcție de funcționalitatea lor și de condițiile pe care le vizează. Iată principalele categorii împreună cu câteva exemple:

Interacțiunea utilizatorului

:planare

Selectează un element atunci când cursorul mouse-ului trece peste el.

:activ

Selectează un element atunci când un utilizator îl activează, de obicei făcând clic.

:vizitat

Selectează linkurile pe care utilizatorul le-a vizitat.

Structural

:primul copil

Selectează primul element copil al unui părinte.

:ultimul copil

Selectează ultimul element copil al unui părinte.

:al-al-lea copil (n)

Selectează elemente în funcție de poziția lor în cadrul unui părinte, permițându-vă să vizați anumiți copii.

Legat de formă

:dezactivat

Selectează elemente de formular dezactivate.

:verificat

Selectează butoanele radio sau casetele de selectare bifate.

Starea elementului UI

:invalid

Selectează elemente de formular nevalide.

:necesar

Selectează câmpurile obligatorii ale elementelor de formular.

: optional

Selectează elemente de formular care sunt câmpuri opționale.

Legături

:legătură

Selectează linkuri nevizitate.

Bazat pe limbaj

:lang()

Selectează elemente în funcție de limba specificată în atributul lor „lang”.

Puteți încerca un exemplu comun prin aplicarea efectelor :hover pe imagini într-o galerie. Stilurile tipice includ mărirea sau estomparea acestor imagini atunci când cineva trece cu mouse-ul peste ele.

Explorarea pseudo-elementelor CSS

Un pseudo-element CSS este ca un cuvânt cheie special pe care îl puteți folosi cu selectoare pentru a stila anumite părți ale conținutului unui element sau pentru a insera conținut suplimentar. Aceste cuvinte cheie vă permit să vizați și să stilați elemente pe baza structurii lor de conținut.

Pseudo-elemente îmbunătățiți designul și aspectul paginii dvs. web oferindu-vă abilitatea de a stila elementele în moduri care în mod tradițional erau posibile numai cu elemente HTML reale.

Sintaxa și implementarea pseudo-elementului CSS

Pseudo-elementele din CSS au o sintaxă specifică care implică utilizarea a două două puncte (::) urmată de numele pseudo-elementului. Iată sintaxa de bază:

selector::pseudo-element {
/* styles */
}

În această sintaxă:

  • selector vizează elementul la care doriți să aplicați pseudo-elementul. Poate fi orice selector CSS valid, inclusiv deloc.
  • pseudo-element este numele pseudo-elementului pe care doriți să-l vizați. Puteți utiliza doar un pseudo-element într-un selector, deoarece nu au sens în combinație.

Iată câteva dintre pseudo-elemente:

::inainte de

Inserează conținut înaintea conținutului elementului selectat.

::după

Inserează conținut după conținutul elementului selectat.

::prima literă

Stilează prima literă de text dintr-un element.

::selecţie

Stilează porțiunea de text pe care un utilizator a selectat-o ​​cu cursorul.

::marker

Stilează caseta de marcare a unui element din listă (de exemplu, marcatorul sau numărul dintr-o listă).

::tac

Aplică stiluri la indicii în elemente media, cum ar fi

The ::inainte si ::dupa pseudo elemente poate fi deosebit de dificil de înțeles, așa că exersarea acestora te va ajuta să stăpânești restul.

Asemănări și diferențe

Iată asemănările și diferențele dintre pseudo-clase și pseudo-elemente CSS:

Pseudo-clase

Pseudo-Elemente

Sintaxă

Prefixat cu un singur două puncte (:).

Prefixat cu două două puncte (::).

Utilizare

Selectați și stilați elementele în funcție de starea, poziția sau interacțiunea cu utilizatorul.

Stilați anumite părți ale conținutului unui element sau creați elemente virtuale.

Selectoare

Poate apărea în orice punct al unui selector complex sau compus.

Trebuie să fie componenta finală a unui selector și poate apărea o singură dată.

Inserarea conținutului

Nu inserează conținut, în primul rând pentru stilul bazat pe stare.

Poate insera conținut sau elemente virtuale înainte sau după conținutul elementului selectat.

Stilul tipografic

Nu este folosit de obicei pentru stilul tipografic.

Folosit pentru text și stilul tipografic (de exemplu, ::prima linie, ::prima literă).

Piese vizate

Vizează elemente întregi.

Vizează anumite părți ale conținutului unui element.

Suport pentru browser

În general bine susținut.

În general, bine acceptat, dar unele browsere mai vechi pot avea suport limitat.

Pseudo-clasele și pseudo-elementele sunt importante în CSS pentru crearea diferitelor stiluri și caracteristici interactive. Deși au unele asemănări, fiecare are propriile roluri unice în design și dezvoltare web.

Pseudo-clase și pseudo-elemente în acțiune

Puteți exersa utilizarea pseudoclaselor și pseudoelementelor CSS în diferite proiecte pentru a vă evalua înțelegerea. Exemple de proiecte simple pe care le puteți face includ carduri de profil, meniuri de navigare și stilul listelor, printre altele. Aceste proiecte oferă experiență practică pentru a vă îmbunătăți abilitățile CSS, încorporând în același timp interactivitate și stil în design-urile dvs. web.