Objasnite kako pretraživač određuje na koje elemente treba primeniti CSS stilove.

Браузер одређује на које елементе ће применити CSS стилове користећи механизме претраге и подударања засноване на CSS селекторима.

Процес се одвија на следећи начин:

1. Парсирање CSS: Браузер парсира CSS датотеке и <style> блокове у HTML-у, стварајући унутрашње представљање стилова.
2. Парсирање HTML: Браузер парсира HTML, стварајући DOM (Document Object Model) дрво.
3. Подударање (Matching): За сваки чвор у DOM-у, браузер покушава да га подудара са правилима CSS. Ово се ради проверавањем селектора у CSS правилима. Обично се ради од најспецифичнијег дела селектора ка мање специфичним (са десна на лево). На пример, за селектор div article p, прво ће пронаћи p, затим проверити да ли је он потомак article, који је пак потомак div.
4. Примена (Applying): Ако DOM чвор одговара једном или више CSS правила, браузер примењује одговарајуће стилове на тај чвор. У случају више применљивих правила, браузер одређује коначни скуп стилова користећи правила специфичности, редоследа објављивања и наследства.

Специфичност (Specificity):

Специфичност је алгоритам који браузер користи за израчунавање тежине CSS селектора. Више специфичан селектор има већи приоритет при примени стилова. Специфичност се рачуна на основу броја ID, класа/псеудокласа/атрибута и елемената/псеудоелемената у селектору.

// Израчунавање специфичности: (a, b, c)
// a = број ID
// b = број класа, псеудокласа, атрибута
// c = број елемената, псеудоелемената
// Стилови у inline-у имају највиши приоритет (1, 0, 0, 0)
// Селектор `*` има специфичност (0, 0, 0)

Пример израчунавања специфичности:

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

Редослед објављивања:

Ако два правила имају исту специфичност, примењује се оно које је објављено последње у CSS-у.

Наслеђивање (Inheritance):

Нек some CSS својства се наслеђују од родитељских елемената ка дечијим (нпр., color, font-family). Ако за својство није задато јасно вредност на елементу, браузер тражи наслеђену вредност узвишући се по DOM-у.

Тако, браузер одређује стилове за елемент путем подударања селектора, решавања конфликата помоћу специфичности и редоследа објављивања, као и узимајући у обзир наслеђивање.