Explică cum determină browserul asupra căror elemente trebuie aplicate stilurile CSS.

Browserul determină ce elemente să aplice stiluri CSS folosind mecanisme de căutare și potrivire bazate pe selectori CSS.

Procesul are loc după cum urmează:

1. Analiza CSS: Browserul analizează fișierele CSS și blocurile <style> din HTML, creând o reprezentare internă a stilurilor.
2. Analiza HTML: Browserul analizează HTML-ul și creează Arborele DOM (Document Object Model).
3. Potrivire (Matching): Pentru fiecare nod din Arborele DOM, browserul încearcă să îl potrivească cu regulile CSS. Acest lucru se face verificând selectorii din regulile CSS. De obicei, browserul lucrează de la părțile mai specifice ale selectorului către cele mai puțin specifice (de la dreapta la stânga). De exemplu, pentru selectorul div article p, întâi găsește p, apoi verifică dacă este un descendent al article, care la rândul său este un descendent al div.
4. Aplicare (Applying): Dacă un nod DOM corespunde uneia sau mai multor reguli CSS, browserul aplică stilurile corespunzătoare acestuia. În cazul în care mai multe reguli sunt aplicabile, browserul determină setul final de stiluri folosind reguli de specificitate, ordinea declarațiilor și moștenirea.

Specificitate:

Specificitatea este un algoritm folosit de browser pentru a calcula greutatea unui selector CSS. Un selector mai specific are prioritate mai mare la aplicarea stilurilor. Specificitatea se calculează în funcție de numărul de ID-uri, clase/pseudoclasă/atribute și elemente/pseudoelemente din selector.

// a = numărul de ID-uri
// b = numărul de clase, pseudoclasă, atribute
// c = numărul de elemente, pseudoelemente
// Stilurile inline au prioritatea cea mai mare (1, 0, 0, 0)
// Selectorul `*` are specificitatea (0, 0, 0)

Exemplu de calcul al specificității:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Ordinea declarațiilor:

Dacă două reguli au aceeași specificitate, se aplică regula care a fost declarată ultima în codul CSS.

Moștenirea (Inheritance):

Unele proprietăți CSS sunt moștenite de la elementele părinte către cele copil (de exemplu, color, font-family). Dacă pentru o proprietate nu se specifică o valoare explicită pe element, browserul caută valoarea moștenită în sus, pe arborele DOM.

Astfel, browserul determină stilurile pentru un element prin potrivirea selectorilor, rezolvarea conflictelor folosind specificitatea și ordinea declarațiilor, precum și luarea în considerare a moștenirii.