الرئيسية / تقني / الفرق بين الـDescendant selector ,والـChild Selector

الفرق بين الـDescendant selector ,والـChild Selector



في سؤال اتسألته في Interview وللأسف مكنتش مستحضر إجابته يومها، مع انها من الـBasics اللي المفروض أي حد بيكتب CSS يبقى عارفها، وهو ببساطة عن ايه الفرق بين الـDescendant selector ,والـChild Selector، فـ لو ماتعرفش الفرق بينهم يبقى كمل معايا

دلوقتي نفترض عندك Unordered List فيها حبة List Items، وجوة الـList Items دي في List Items تانية، يعني تخيل معايا Navigation Bar مثلًا وجواه Navigation Items، ومن ضمنهم Dropdowns، حلو كدة؟ ركز معايا بقى

دلوقتي انت حابب تعمل Style للـList Items اللي جوة، فـ ببساطة لو كتبت الـSelector بالشكل الأولاني الموجود في الصورة، فـ انت هتحدد أي List Item موجود تحت الـUnordered List، سواء بقى كان Navigation Item أو حتى Dropdown Item، طالما الـList Item موجود تحت الـUnordered List فـ خلاص الـStlyling ده هيتطبق عليه

وده فيما يعرف بالـChild Selector، كل الأبناء والأحفاد وأحفاد الأحفاد لحد أخر النسل 😂

ولكن هنا احنا محتاجين نستخدم الـDescendant selector، لأننا ببساطة عاوزين نحدد الـList Items اللي تحت الـUnorderd List مباشرةً، الأبناء بس، مالناش دعوة بأي حاجة تحتهم، وده بالظبط اللي بيقدر يقدمهولنا الـDescendant selector زي ما موجود قدامك في المثال التاني

الـDescendant selector مش هتستخدمه كتير إلا في حالات معينة طالما بتشتغل على مشاريع صغيرة، إنما اول ما تشتغل على مشروع كبير فـ هيكون من الحاجات الأساسية اللي هتتعامل معاها كتير

هتلاقي في أول لينك رابط تشوف فيه الفرق بنفسك، وكالعادة، ده الموضوع ببساطة.

الجينيص
CSS Notes


الجينيص