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

ბრაუზერი ანალიზებს HTML ხეს და CSS წესებს, შემდეგ კი ქმნის რენდერების ხეს (render tree), რომელიც აკავშირებს DOM ელემენტებს შესაბამის CSS სტილებთან.

სტილების განსაზღვრის პროცესი მოიცავს რამდენიმე ნაბიჯს:

1. HTML და CSS-ის პარსინგი: ბრაუზერი პარსავს HTML დოკუმენტს და ქმნის DOM ხეს. ერთდროულად პარსავს CSS სტილებს ( <style> ტეგებიდან, <link> ტეგებიდან ან inline სტილებიდან), რის შედეგადაც იქმნება CSSOM ხე (CSS Object Model).

2. სელექტორების შესაბამისობა: ბრაუზერი გადის DOM ხეზე და თითოეულ ნუსხაში ეძებს შესაბამის წესებს CSSOM-ში. შესაბამისობა მარჯვნიდან მარცხნივ ხდება. მაგალითად, სელექტორ .parent .child-ისთვის, ბრაუზერი პირველ რიგში ეძებს child კლასის ელემენტებს, შემდეგ კი ამ ელემენტების მშობლებს, რომლებსაც parent კლასი აქვთ. ეს მეთოდი საშუალებას აძლევს სწრაფად გამორიცხოს დიდი ქვედა ხეები, რომლებიც სელექტორს არ ემთხვევა.

3. კასკადირება: როდესაც ერთ ელემენტზე რამდენიმე წესია, ბრაუზერი იყენებს კასკადირების წესებს. კასკადირება განსაზღვრავს სტილების გამოყენების წესს:

   • სტილების წყარო (ავტორის სტილები, მომხმარებლის სტილები, ბრაუზერის სტილები)
   • სელექტორების სპეციფიკაცია
   • წესების მიმდევრობა
   • !important გამოყენება

   მაგალითი სელექტორების სპეციფიკაციის:

   სელექტორის ტიპი	ქულები
   Inline სტილები	1000
   ID სელექტორები	100
   კლასები, ატრიბუტები	10
   ტეგები, ფსევდოელემენტები	1
   უნივერსალური (*)	0

   უფრო სპეციფიკური სელექტორები იღებენ უპირატესობას.

4. მემკვიდრეობა: ზოგი CSS თვისება მემკვიდრეობით გადადის მშობლის ელემენტიდან შვილებზე (მაგალითად, font-size, color). ბრაუზერი ამას ითვალისწინებს სტილების გამოყენებისას.

5. რენდერების ხის შექმნა: DOM ხისა და გამოყენებული CSS სტილების საფუძველზე, იქმნება რენდერების (ან layouტ ხე). ის შეიცავს მხოლოდ ხილულ ელემენტებს და მათ სტილებს, რომლებიც აუცილებელია განლაგებისა და გამოსახულებისთვის.

   // მაგალითი: ელემენტი რამდენიმე 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; } /* გამოიყენება ყვითელი ფერი */
   

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