Objasnite kako pretraživač određuje na koje elemente…

Брајзер анализира HTML дрво и CSS правила, а затим креира дрво за приказ (render tree), кое повезује елементе DOM са одговарајућим стиловима CSS.

Процес одређивања стилова укључује неколико корака:

Парсирање HTML и CSS: Брајзер парсира HTML документ, стварајући DOM дрво. Истовремено се парсирају CSS стилови (из <style> тагова, <link> тагова или inline стилова), стварајући CSSOM дрво (CSS Object Model).
Упаривање селектора: Брајзер пролази кроз DOM дрво и за сваки чвор у DOM тражи одговарајућа правила у CSSOM. Упаривање се одвија са десна на лево. На пример, за селектор .parent .child, прво се траже елементи са класом child, а затим се проверавају да ли имају родитеља са класом parent. Овај приступ омогућава брзо одбацивање великих поддрвета која не одговарају селектору.

Каскадно: Када за исти елемент пронађено више правила, браузер примењује правила каскадног стила. Каскада одређује редослед примене стилова на основу:

извора стилова (ауторски стилови, кориснички стилови, стилови прегледача)
специфичности селектора
редоследа правила
коришћења !important

Пример спецификације:

Тип селектора	Бодови
Inline стилови	1000
ID селектори	100
Класови, атрибути	10
Тагови, псевдоелементи	1
Универзални (`*`)	0

Већина специфичнији селектори имају приоритет.

Наслеђивање: Неки CSS својства се наслеђују од родитељских елемената ка дечијим (нпр. font-size, color). Брајзер узима то у обзир приликом примене стилова.

Креирање render tree: На основу DOM дрвета и применених CSS стилова, креира се дрво за приказ (или layout tree). Оно садржи само видљиве елементе и њихове стилове, неопходне за распоред и приказ.

// Пример: елемент са више правила CSS
// HTML: <p class="text">Hello!</p>

/* CSS */
p {  /* Специфичност: 1 */
  color: blue;
}

.text {  /* Специфичност: 10 */
  color: red; /* Ова боја ће се применити, јер је специфичнија */
  font-size: 16px;
}

p.text { /* Специфичност: 11 */
   font-weight: bold; /* Ова својство ће се применити */
}

/* Поредак је такође важан за селекторе са истом специфичношћу */
div { color: green; }
div { color: yellow; } /* Примењује се жута боја */

На овај начин, браузер пролази кроз кораке парсирања, упаривања, каскадног стила и наслеђивања, како би одредио коначни скуп стилова за сваки елемент пре креирања дрвета за приказ и његовог приказа.

Objasnite kako pretraživač određuje na koje elemente se primenjuju CSS stilovi.