المحددات Selectors ( Child Selector - Descendant Selector ) - تعلم CSS

شرح السليكتور (Selector) في CSS: الفرق بين السلالة (Descendant) والابن المباشر (Child)

في هذا الدرس، نستكمل شرحنا حول السليكتور في CSS، وهي الطريقة التي نستخدمها لتحديد العناصر داخل ملف HTML من أجل تنسيقها. في الدروس السابقة، تعرفنا على كيفية استخدام:

• التاج (Tag Selector)

• الكلاس (Class Selector)

• الآي دي (ID Selector)

• السليكتور العام (Universal Selector) باستخدام النجمة *

النهارده هنتعمق في نوعين مهمين من السليكتور:

• السلالة (Descendant Selector)

• الابن المباشر (Child Selector)

---

1. مثال عملي على العناصر داخل HTML

لنفترض إن عندنا الكود التالي داخل صفحة HTML:

<div>
  <ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
  </ul>
</div>

في هذا المثال:

• عنصر <div> هو الحاوية الرئيسية.

• عنصر <ul> هو ابن مباشر لـ <div>.

• عناصر <li> تعتبر من سلالة <div>، لكنها ليست أبناء مباشرين، بل أبناء مباشرين لـ <ul>.

---

2. استخدام الكلاسات لتحديد التنسيق

لو أضفنا كلاس لكل عنصر:

<div class="test">
  <ul class="menu">
    <li class="item">عنصر 1</li>
    <li class="item">عنصر 2</li>
  </ul>
</div>

دلوقتي نقدر نستخدم CSS لتحديد التنسيق بناءً على العلاقة بين هذه العناصر.

---

3. الفرق بين Descendant و Child Selector في CSS

a) السلالة (Descendant Selector)

نكتب الكود بالشكل التالي:

.test .menu .item {
  color: blue;
}

ده معناه إننا بننسق أي عنصر يحمل الكلاس item بشرط إنه يكون داخل عنصر يحمل الكلاس menu، واللي بدوره يكون داخل عنصر يحمل الكلاس test، بغض النظر عن عدد المستويات أو العلاقة المباشرة.

b) الابن المباشر (Child Selector)

لو عايزين ننسق العناصر الأبناء فقط (بدون السلالة)، بنستخدم علامة > كالتالي:

.test > .menu > .item {
  color: brown;
}

ده بيطبق التنسيق فقط على العناصر اللي هي أبناء مباشرين، مش من السلالة.

---

4. أهمية المسافات في CSS Selectors

• وجود مسافة بين العناصر يعني إن العنصر التالي ممكن يكون في أي مستوى داخل الأول.

• استخدام > يعني إن العنصر التالي لازم يكون ابن مباشر للعنصر السابق.

مثال توضيحي:

div.menu .item { ... } 
/* أي عنصر class="item" داخل عنصر class="menu" داخل تاج div */

div.menu>.item { ... }
/* عنصر class="item" يكون ابن مباشر للعنصر class="menu" اللي هو داخل div */

---

5. اختبار العملي

لو نقلنا عنصر ul أو li خارج <div>، واحتفظنا بنفس الكلاسات، هنلاحظ إن التنسيق مش هيتطبق لو كنا بنستخدم child selector. لكن لو استخدمنا descendant selector، التنسيق هيتم تطبيقه على أي عنصر طالما هو موجود ضمن التسلسل المحدد.

---

6. مثال كامل للتمييز:

<div class="box">
  <ul class="list">
    <li class="element">عنصر 1</li>
    <li class="element">عنصر 2</li>
  </ul>
</div>

/* تنسيق السلالة */
.box .list .element {
  color: green;
}

/* تنسيق الابن المباشر */
.box > .list > .element {
  color: red;
}

لو تم نقل أحد العناصر خارج .box فلن ينطبق عليه التنسيق الثاني لأنه فقد العلاقة المباشرة.

---

الخلاصة:

• استخدم Descendant Selector لما تحب تطبق تنسيق على كل العناصر داخل عنصر معين حتى لو كانت داخل عناصر تانية.

• استخدم Child Selector لما تحب تطبق تنسيق فقط على العناصر الأبناء المباشرين.

---

سؤال الحلقة:

ما الفرق بين div ul li و div > ul > li في CSS؟
شاركنا إجابتك في التعليقات!

---

نتمنى يكون الشرح واضح وسهل، ولو عندكم أي استفسارات أو محتاجين توضيحات إضافية، سيبوا تعليقكم، واستنونا في الدرس الجاي إن شاء الله.

شاهد الموضوع علي موقع w3schools

شاهد الكورس كامل

شاهد الفيديو