Тавзеҳ диҳед, ки чӣ гуна браузер муайян мекунад, ки кадом элементҳо бояд стилҳои CSS-ро қабул кунанд.

Браузер муайян мекунад, ки ба кадом элементҳо бояд CSS-стилҳоро татбиқ кунад, бо истифода аз механизмҳои ҷустуҷӯ ва мувофиқат based on 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):

Баъзе хосиятҳои CSS аз элементҳои падар ба фарзандон мерос мегиранд (масалан, color, font-family). Агар барои хосият арзиши равшан дар элемент муайян нашуда бошад, браузер арзиши меросиро аз боло ба поён дар дарахти DOM меҷӯяд.

Инчунин, браузер стилҳоро барои элемент бо мувофиқат кардани селекторҳо, ҳалли зиддиятҳо бо истифода аз махсусиятнокӣ ва тартиби эълонҳо, инчунин ба назар гирифтани мерос муайян мекунад.