Introducere în Web Development

Browserul aplică niște pseudo-clase pe elemente specifice, în funcție de anumite condiții.

Acestea funcționează asemănător claselor, chiar și când se calculează specificitatea.

Voi acoperi doar cele mai importante pseudo-clase. Poți arunca o privire peste pagina de Pseudo-Clase a MDN. Mie îmi place să mai arunc uneori o privire la această listă, să văd dacă mai găsesc ceva nou ce aș putea folosi.

:hover

Pseudo-clasa :hover se aplică elementelor atunci când cursorul mouse-ului se află deasupra elementului, dar înainte să dea click.

Pe ecranele cu touchscreen, e posibil să fie aplicată în timp ce este apăsat elementul, sau să rămână aplicată și după ce am ridicat degetul. În funcție de ce se întâmplă după ce am dat click, ar fi o idee bună să folosim selectori cu :hover doar în interiorul unui Media query cu hover.

                    @media (hover: hover) {
  .target:hover {
    box-shaddow: 0 0 1em #ccc;
  }
}
                

Proprietatea cursor

Atunci când facem hover peste o ancoră, sau un buton (<button>), cursorul mouse-ului se va schimba într-o mânuță care arată cu degetul.

Dar acest lucru nu se întâmplă pe alte elemente. Din JS vom putea crea interacțiuni cu orice element și ar fi drăguț pentru utilizator să vadă alte cursoare. Pe elementele pe care poate da click o mânuță, săgeți atunci când poate redimensiona ceva, ș.a.

Soluția este să ne folosim de proprietatea cursor.

                    .fake-button {
  cursor: pointer;
}
                

:active

Pseudo-clasa :active se aplică în timp ce elementul este apăsat, atât pe touchscreen, cât și la click-ul de mouse.

                    .target:active {
  box-shadow: none;
}
                

:focus

Pseudo-clasa :focus se aplică atunci când elementul este în focus. În cazul ancorelor și butoanelor, acest lucru se aplică atunci când facem click (sau tap de pe touchscreen).

Elementele de formular pot primi focus atunci când le folosim (mai multe detalii într-un curs viitor, dedicat formularelor).

Un element mai poate primi focus din tastatură, dacă utilizatorul apasă tasta Tab sau Shift+Tab. E o idee bună să ne optimizăm site-ul pentru aceste cazuri, pentru că utilizatorii pot avea un motiv întemeiat să nu folosească mouse-ul.

HTML tabindex

Elementele care în mod normal nu primesc focus pot fi forțate să primească folosind atributul HTML tabindex.

                    <div tabindex="0">I can be focused</div>
                

Atunci când se apasă Tab, browserul va face focus pe rând pe toate elementele cu tabindex="0", apoi pe "1" ș.a.m.d. Odată ce se vor termina toate, se va întoarce la "0".

Însă este indicat să nu folosim valori mai mari decât "0". Dacă vrem focus într-o ordine mai specifică, s-ar putea să realizăm același efect punând elementele în ordine în HTML, apoi ordonându-le din CSS (poate cu order de la Flexbox și Grid).

Dacă vrem să nu avem focus pe un element care altfel ar avea, putem să folosim tabindex="-1".

:focus-within

Pseudo-clasa :focus-within se aplică pe elementele care au în interior cel puțin un element în focus, sau sunt însele în focus.

:nth-child(...)

Folosind această pseudo-clasă ciudată, putem selecta doar anumite elemente surori, fără să fie nevoie să folosim elemente distinctive precum clase normale.

Nu știu cât sens are asta, dar poate exemplele o să ajute:

                    /* Elementele pare (al 2-lea, 4, 6...) */
:nth-child(even), :nth-child(2n)

/* Elementele impare */

:nth-child(odd), :nth-child(2n+1)

/* Fiecare al 3-lea element (3, 6, 9,...) */
:nth-child(3n)
                

Mai există și pseudo-clasele :first-child și :last-child care selectează elementul doar dacă este primul, respectiv ultimul din elementul părinte.

:not(«selector»)

Pseudo-clasa :not ne permit să selectăm elemente doar dacă nu se potrivesc selectorului din paranteze.

Până în 2021, eram obligați să folosim un singur selector simplu între paranteze. Browserele mai noi ne permit să punem orice selector, inclusiv listă de selectori.

                    .item:not(.active) {
  border-block-end: 1px solid #123;
}
                

:has(«selector»)

Pseudo-clasa :has a fost recent implementată de toate browserele (începând cu 2024).

Aceasta ne permite să selectăm elemente doar dacă acestea conțin elementele ce se potrivesc cu selectorul dat între paranteze.

                    .item:has(> a) {
  padding-inline: 1em;
}
                

Alte pseudo-clase potențial utile

:root

Se aplică pe elementul <html>. Spre deosebire de selectorul html, fiind pseudo-clasă, are specificitate mai mare.

Îl putem folosi pentru a seta o valoare pentru 1rem, prin specificarea unui font-size.

:empty

Se aplică pe orice element nu are conținut. Spațiul gol nu se consideră ca fiind conținut.

:only-child

Se aplică elementelor care sunt singure la părinți.

:visited

Se aplică pe o ancoră ce duce la o pagină deja vizitată.

Pot fi restricții asupra proprietăților ce se vor aplica aici.