გთხოვთ, ახსნათ, როგორ განსაზღვრავს ბრაუზერი, რომელ ელემენტებზე უნდა იყოს გამოყენებული CSS სტილები.

ბრაუზერი განსაზღვრავს, რომელ ელემენტებზე უნდა განთავსდეს 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):

ზოგიერთი CSS თვისებები მემკვიდრეობით გადაეცემა მშობელ ელემენტებიდან შვილებს (მაგალითად, color, font-family). თუ თვისებისთვის არ არის პირდაპირ მითითებული მნიშვნელობა, ბრაუზერი ეძებს მემკვიდრეობით მნიშვნელობას DOM ხეზე ზევით.

ამ გზით, ბრაუზერი განსაზღვრავს სტილებს ელემენტზე სელექტორების შესაბამისობის, სპეციფიკობის, განცხადებების წესის და მემკვიდრეობის გათვალისწინებით.