Pseudo-Elemente și Pseudo-Clase în CSS

Publicat: 2020-08-20

De fiecare dată când trebuie să modificăm un stil CSS pe web, Toni și cu mine ne jucăm piatră-hârtie-foarfece pentru a vedea cine este „norocosul” care poate face sarcina. Cum de, vă puteți întreba? Ei bine, pentru o lungă perioadă de timp lucrul cu HTML și CSS a fost o durere în a**, deoarece repararea ceva la un capăt a rupt multe lucruri în altă parte.

Gif comic pentru a arăta cât de complicat este CSS
Nu se poate să nu admiri și să te minunezi de munca depusă de dezvoltatorii front-end.

Dar adevărul este că CSS s-a schimbat mult în ultimii ani și, dacă profitați de noile sale funcționalități, este mult mai ușor să vă configurați și să vă stilați site-ul în mod corespunzător și eficient. După părerea mea, două dintre marile progrese în CSS pe care le-am văzut recent sunt includerea, în primul rând, a flex (la aranjarea rândurilor și coloanelor) și, puțin mai târziu, a grid (la aranjarea grilelor).

CSS este plin de funcții care vă pot simplifica munca . Și astăzi vom vedea două dintre ele: pseudo-elemente și pseudo-selectori.

Cum să „creezi conținut” cu pseudo-elemente CSS

Pseudo-elementele CSS sunt un mecanism pentru a accesa părți ale HTML care nu au un nod asociat în DOM . De exemplu, o „parte a documentului nostru” poate fi „primul rând al unui paragraf”, „prima literă a unui paragraf” sau „selecția făcută de utilizator”, niciuna dintre acestea nu are un nod asociat. Dar pseudo-elementele sunt și o modalitate de a crea conținut înainte sau după un element existent prin CSS.

Pseudo-elementele disponibile în CSS3 sunt:

  • ::before : adaugă conținut înaintea unui element
  • ::afte r: adaugă conținut după un element
  • ::first-letter : selectează prima literă a elementului „block” (adică cei a căror proprietate de display este setată la block , inline-block , table-cell etc.)
  • ::first-line : selectează prima linie a unui element „bloc”.
  • ::selection : se referă la părțile documentului pe care vizitatorul le-a selectat

După cum puteți vedea, pseudo-elementele sunt caracterizate de a începe cu o pereche de două puncte ( :: ). Și așa le folosești.

Selectarea părților documentului

Să presupunem, de exemplu, că vrem ca un anumit paragraf să aibă primul rând în portocaliu și subliniat. Ei bine, doar fă ceva de genul acesta:

 p::first-line { color: orange; text-decoration: underline; }

și vei obține rezultatul corect:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Dacă, pe de altă parte, doriți să modificați selecția, abordarea este exact aceeași. Rețineți că numărul de proprietăți CSS pe care le putem modifica este limitat la color , background , cursor și outline :

 p::selection { background: #21acde; color: white; }

Puteți vedea rezultatul în următorul paragraf, presupunând că selectați ceva:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Crearea de conținut nou

De asemenea, aveți opțiunea de a adăuga în mod dinamic conținut pe pagina dvs. De exemplu, imaginați-vă că aveți o listă de articole ca aceasta:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

De obicei, așa arată listele:

  • unu
  • Două
  • Trei

dar îl puteți modifica astfel încât fiecare element să fie separat de următorul folosind o bară albastră:

  • unu
  • Două
  • Trei

folosind pseudo-elementul ::after pe fiecare articol din listă, după cum urmează:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

Cu ::before și ::after pseudo-elemente poți face multe lucruri grozave. De exemplu, puteți combina mai multe fundaluri într-un singur element, puteți afișa adresele URL ale link-urilor atunci când pagina este tipărită, puteți ordona elementele plutitoare, eticheta blocurile, vă înfrumusețați tipografia și așa mai departe.

Cum să aplici stilurile mai precis folosind pseudo-clase

Pseudoclasele CSS ne permit să selectăm elemente ale site-ului nostru care fie sunt într-o anumită stare, fie au o proprietate specială care le deosebește. Cel mai comun (și cel mai vechi) exemplu este probabil pseudo-clasele de link:

  • a:link sunt acele linkuri pe care nu le-ați vizitat deja
  • a:visited este orice link pe care l-ați vizitat deja
  • a:hover este linkul pe care îl plasați
  • a:focus potrivește cu linkul care este focalizat în prezent (care este similar cu trecerea cu mouse-ul, dar folosind tastatura în loc de mouse)
  • a:active se potrivește cu linkul pe care faceți clic în prezent

În CSS există aproximativ 60 de pseudo-clase. Marea majoritate dintre ele vă permit să filtrați elemente în funcție de starea lor (de exemplu, puteți selecta elemente doar în citire folosind, ați ghicit, pseudoclasa :read-only ). Dar există câteva „excepții” interesante de la această regulă care merită menționate.

Dar înainte de a face, doar o scurtă notă secundară: observați cum puteți distinge o pseudo-clasă de un pseudo-element, deoarece primul începe cu un singur două puncte ( : ), în timp ce al doilea începe cu două ( :: ).

Selectarea copiilor unui element folosind pseudo-clase „copil” și „de tip”.

Vă amintiți exemplul pe care l-am văzut mai devreme în care am adăugat o bară verticală pentru a separa elementele unei liste? Ei bine, dacă te uiți cu atenție, vei vedea că regula pe care am stabilit-o nu prea funcționează:

  • unu
  • Două
  • Trei

pentru că ultimul element include și o bară verticală, deși nu ar trebui. Dacă vrem să-l eliminăm, putem face ceva de genul acesta:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

care funcționează exact așa cum v-ați imagina:

  • unu
  • Două
  • Trei

După cum puteți vedea, tot ceea ce facem este să adăugăm o nouă regulă folosind pseudo-clasa :last-child , care ne permite să selectăm ultimul element li din lista noastră ul și, odată ce îl avem, să ascundem pseudo-elementul său ::after cu proprietatea de display setată la none .

Caracteristici speciale ale * -child și * -of-type

Există trei variante ale *-child :

  • :first-child se potrivește cu primul copil al unui element (dah!)
  • :last-child face la fel, dar cu acesta din urmă
  • :nth-child(i) , ați ghicit, selectează al i -lea element (de exemplu, :nth-child(2) se potrivește cu al doilea copil)

Deci, să ne uităm și să ne gândim la următorul CSS:

 li strong:first-child { color: orange; text-decoration: underline; }

și următorul fragment HTML:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

Ce crezi ca se va intampla? În principiu, se pare că în toate cele trei cazuri, cuvântul ipsum va fi portocaliu și subliniat, pentru că ipsum este primul copil strong din fiecare element li , nu? Să vedem:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Ei bine, destul de aproape. Poți ghici de ce s-a întâmplat asta?

Pseudoclasa :first-child se aplică primului copil al unui element. În prima propoziție, ipsum este prima etichetă strong , care se întâmplă să fie primul copil. În a doua propoziție, primul nod copil este em (cu cuvântul Lorem ) și apoi vine o etichetă strong cu cuvântul ipsum . Prin urmare, această etichetă puternică nu este „primul copil”. În cele din urmă, în a treia propoziție există două etichete care se potriveau cu regula noastră: ipsum (este ca prima propoziție) și sit . Observați cum sit este o etichetă strong care este primul copil al etichetei sale părinte ( em ).

Deci, ce se întâmplă dacă am dori să subliniem prima etichetă strong a fiecărui element li ? Ei bine, trebuie să folosim o pseudo-clasă diferită și să ne asigurăm că potrivim doar elemente care sunt copii direcți ai lui li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

care funcționează conform așteptărilor:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Destul de grozav, nu? Din nou, există trei variante ale acestei pseudo-clase:

  • x:first-of-type se potrivește cu primul frate al cărui tip este x
  • x:last-of-type selectează ultimul
  • x:nth-of-type(i) se potrivește cu al i -lea frate al cărui tip este x

Selectând opusul cu :not

În sfârșit, pseudoclasa despre care voiam să vă vorbesc astăzi este :not . :not este o pseudo-clasă care se potrivește acelor elemente care nu îndeplinesc o anumită proprietate. De exemplu, să revenim la exemplul nostru anterior:

  • unu
  • Două
  • Trei

Pentru a rezolva problema barei care apare în ultimul element, practic (1) am adăugat bara la toate elementele li și (2) am suprascris regula în ultimul element și am ascuns-o:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Dar acest lucru nu pare foarte optim, nu-i așa? Depășim cu primul tule și apoi trebuie să ne reparăm stilurile în ultimul element. Ceea ce ne-am dorit cu adevărat era să adăugăm bara tuturor elementelor, cu excepția ultimului...

Ei bine, putem realiza acest lucru aplicând pseudo-clasa :not și combinând-o cu :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

care aplică stilul tuturor elementelor li care nu sunt ultimul element ( :not(:last-child) ), care descrie perfect scopul nostru și astfel ne rezolvă problema:

  • unu
  • Două
  • Trei

În concluzie

Pseudo-elementele și pseudo-clasele CSS ne permit să fim mult mai precisi atunci când accesăm diferitele elemente ale site-ului nostru. Cu ele, putem scrie reguli CSS mai concise și mai specifice, ceea ce simplifică întreținerea acestuia și evită posibilitățile de a trebui să suprascriem continuu reguli generice pentru cazuri specifice.

Sper că ți-a plăcut această postare și, dacă ți-a plăcut, te rog să o distribui prietenilor tăi!

Imagine prezentată de JFL pe Unsplash.