შევეშვათ დონატებს და გადავიდეთ სტაფილოზე, მსოფლიოში ყველაზე ჯანსაღ საკვებზე და კურდღლების უსაყვარლეს კერძზე იცოდით, რომ სტაფილო არ არის მხოლოდ სტაფილოსფერი? თავდაპირველად სტაფილო იასამნისფერი იყო. ზოგი ახლაც არის. ესაა მოკლე ვებ–გვერდი, სადაც ჩამოვთვალეთ სტაფილოს ფერები და მოკლე ისტორია. იმისთვის, რომ ყოველი ფერის სახელი იმავე ფერის იყოს, გამოვიყენეთ კლასები. მომწონს, როგორ გამოიყურება სტილები სიაში, მაგრამ ტექსტში გამოყოფილ იასამნისფერში დარწმუნებული არ ვარ მგონი, სჯობს ფონს შევეშვა და უფრო სადა შეფერილობას მივმართო. როგორ ავუხსნა ბრაუზერს, რომ ამ ორ ისამნისფერზე სხვადასხვა სტილი გამოიყენოს? რადგანაც იგივე კლასიდან არიან, კლასს ვერ გამოვიყენებთ, თუ ახალს არ შევქმნით. ასევე, თეგის იგივე სახელი აქვთ – ანუ, ელემენტი+კლასის სახელის სელექტორს ვერ გამოვიყენებთ. არის მათ შორის რამე განსხვავება? კი. აქ არის თეგში, აქ კი – თეგში სხვაობაა მშობელ თეგებში, ანუ, იმ თეგებში, რომელებშიც ესენია ჩასმული. ამ ინფორმაციის გამოყენებით შეგვიძლია შექმნათ ახალი CSS წესი, "შთამომავალი სელექტორი" რომელიც ირჩევს ელემენტებს დოკუმენტში მათი პოზიციიდან გამომდინარე. მაგალითად, იმისთვის რომ ავირჩიოთ იისფერი მხოლოდ პარაგრაფიდან დავწეროთ p შემდეგ გამოვტოვოთ ადგილი –– ეს ძალიან მნიშვნელოვანია –– შემდეგ კლასის სახელი - dot purple და დავამატოთ ის თვისებები, რაც უფრო ნატიფი ფორმატირების საშუალებას მოგვცემს პირველ რიგში გამჭვირვალე ფონი კარგია. ასე ჩვენ შევცვალეთ ეს ტექსტი, მაგრამ ხელუხლებელი დავტოვეთ მეორე. ახლა ყოველთვის, როცა ამ კლასს პარაგრაფში გამოვიყენებთ ის ასეთი სტილის იქნება. ამ ადგილის გამოყენება შეგვიძლია ჩვენს დოკუმენტში უფრო ღრმად რომ ჩავიდეთ მაგალითად, გვინდა რომ შეიცვალოს მხოლოდ –ში მყოფი თეგების ელემენტები დავიწოთ მშებელი თეგით – შემდეგ ჰარი შემდეგ და, მაგალითად, ხაზის სხვა სიმაღლე მივანიჭოთ – ასე უკეთ გამოიკვეთებიან. კარგია. –ს წინ შეგვიძლია დავურთოთ , რომ დავრწმუნდეთ, რომ მხოლოდ –ში მყოფი თეგები შეიცვლება. როგორც ხედავთ, შთამომავალი სელექტორების გამოსაყენებლად კარგად უნდა ვიცოდეთ დოკის სტრქუტურა და რომელი თეგებია რომელი თეგების შიგნით თუ სტრუქტურა კარგია, მაშინ ამის გაკეთება მარტივი იქნება იმიტომ რომ უბრალოდ თეგების იერარქიას ჩაწერ. გვაქვს თეგი, მის შიგნით კი – თეგი და კიდევ შიგნით – თეგი. თუ იერარქია კარგად არ არის დალაგებული, უნდა გაასწორო იმიტომ რომ ასე უფრო მარტივად აღიქვამ გვერდის სტრუქტურას და CSS სელექტორებს მის მიხედვით შეარჩევ ამ ადგილის გამოყენება ნებისმიერ სელექტორებს შორის შეგიძლია მაგალითად, იპოვო კონკრეტული თეგი ელემენტში კონკრეტული ID-ით ან კონკრეტული ID კონრეტული კლასის ელემენტებში მოკლედ, ნებისმიერი კომბინაციის შექმნაა შესაძლებელი მაგრამ თუ გვერდების სტრუქტურა შეიცვლება CSS წესების შეცვლაც შეიძლება დაგჭირდეს ამიტომ ფრთხილად გამოიყენე ისინი და ყოველთვის გათვალე მომავალი ცვლილებები თუ სტრუქტურაზე ნაკლებად გინდა იყო დამოკიდებული, გამოიყენე კლასები ახლა გადავხედოთ შექმნილ წესებს და გავაანალიზოთ ისინი პირველი წესი ეხება ყველა იისფერ ელემენტს პარაგრაფების შიგნით. თუ დავამატებ ახალ პარაგრაფს იისფერის კლასის ელემენტით, დაფორმატდება თუ არა ისინიც? კი, იმიტომ რომ წესი სწორედ მათ ითვალისწინებს. მჭირდება უფრო ზუსტი წესი? ჯერ–ჯერობით, არა. თუ ეს პარაგრაფები სულ, მაგალითად, "სტატიის" კლასის ელემენტში იქნებოდა, მაშინ ჩავამატებდი მაგასაც განსაზღვრებაში. მეორე წესი განსაზღვრავს ყველა ელემენტის ხაზის სიმაღლეს მინდა ,რომ ყველაფერს თეგში ეცვლებოდეს ხაზის სიმაღლე? ალბათ, არა. ეს წესი ძალიან ზოგადია. რადგანაც არ ვარ დარწმუნებული, დავუმატებ ამ -ს კლასს და შევცვლი ამას ul.spacey–ზე ასე წესი უფრო სპეციფიკური გახდა. დროთა განმავლობაში, წესები შეიძლება მეტად ან ნაკლებად სპეციფიკური გავხადო მოკლედ, ეს CSS ხერხი ძალიან გამოსადეგი რამეა ივარჯიშე მის გამოყენებაზე.