CSS - Combinators العلاقات بين العناصر

CSS - Combinators (العلاقات بين العناصر)

🔸 في CSS، "Combinators" هم رموز تُستخدم لتحديد العلاقة بين عناصر HTML المختلفة. هذه الرموز تُساعد على اختيار عناصر معينة بناءً على موقعها داخل الصفحة.

🔹 أنواع العلاقات (Combinators)

• المسافة (الابن بشكل غير مباشر): div p - يحدد جميع العناصر <p> التي تقع داخل <div>، سواء بشكل مباشر أو غير مباشر.
• علامة > (الابن المباشر): div > p - يحدد فقط العناصر <p> التي تكون أبناء مباشرة لـ <div>.
• علامة + (الأخ التالي مباشرة): div + p - يحدد العنصر <p> الذي يأتي مباشرة بعد <div>.
• علامة ~ (جميع الإخوة اللاحقين): div ~ p - يحدد جميع العناصر <p> التي تأتي بعد <div> وتشارك نفس الأب.

🧪 مثال على المسافة (Descendant Selector)

div p {
  color: red;
}

<div>
  <p>سيتم تطبيق اللون الأحمر هنا</p>
  <section><p>وهنا أيضًا</p></section>
</div>

🧪 مثال على > (Child Selector)

div > p {
  color: green;
}

<div>
  <p>هذا يتم تطبيق اللون عليه</p>
  <section><p>هذا لا يتأثر لأنه ليس ابنًا مباشرًا</p></section>
</div>

🧪 مثال على + (Adjacent Sibling Selector)

div + p {
  color: blue;
}

<div>عنصر div</div>
<p>هذا فقط يتأثر لأنه يأتي مباشرة بعد div</p>
<p>هذا لا يتأثر</p>

🧪 مثال على ~ (General Sibling Selector)

div ~ p {
  color: orange;
}

<div>عنصر div</div>
<p>هذا يتأثر</p>
<p>وهذا أيضًا يتأثر إذا كان لهما نفس الأب</p>

📌 ملاحظات مهمة

• اختيار العلاقة المناسبة بين العناصر يُسهل كتابة CSS فعّال ودقيق.
• يمكن الجمع بين Combinators وعناصر أو أصناف للحصول على نتائج أكثر تحديدًا.