28- مركبات CSS

علامة الجمع (Combinator) هي شيء يوضح العلاقة بين المحددات (Selectors).

يمكن أن يشتمل محدد CSS على أكثر من محدد بسيط واحد. بين المحددات البسيطة، يمكننا تضمين علامة جمع.

هناك أربعة أنواع مختلفة من علامات الجمع في CSS:

• محدد السلالة (descendant selector) (مسافة فارغة)
• محدد الطفل (child selector) (>)
• محدد الأخ المجاور (adjacent sibling selector) (+)
• محدد الأخ العام (general sibling selector) (~)

محدد السلالة (Descendant Selector)

يختار محدد السلالة جميع العناصر التي تعتبر من نسل عنصر محدد.

على سبيل المثال، يختار الكود التالي كل عناصر <p> التي توجد داخل عناصر <div>:

div p {
  background-color: yellow;
}

محدد الطفل (Child Selector) (>)

يختار محدد الطفل جميع العناصر المباشرة التي تعتبر أبناء عنصر محدد.

على سبيل المثال، يختار الكود التالي كل عناصر <p> التي تعتبر أبناء مباشرين لعناصر <div>:

div > p {
  background-color: yellow;
}

محدد الأخ المجاور (+)

يُستخدم محدد الأخ المجاور لانتقاء عنصر يقع مباشرة بعد عنصر محدد آخر.

شروط استخدام محدد الأخ المجاور:

• يجب أن يكون العنصران المراد تحديد علاقتهما أخوين، أي يتشاركان بنفس العنصر الأب.
• يُقصد بـ “مجاور” أن يكون العنصر موجودًا مباشرة بعد العنصر الآخر.

div + p {
  background-color: yellow;
}

محدد الأخ العام (~)

يُستخدم محدد الأخ العام لانتقاء جميع العناصر التي تعتبر أخوة لعنصر محدد، بغض النظر عن موقعها النسبي بالنسبة إليه.

شروط استخدام محدد الأخ العام:

• يجب أن يكون العنصران المراد تحديد علاقتهما أخوين، أي يتشاركان بنفس العنصر الأب.
• لا يشترط أن يكون العنصر المراد تحديده يليه مباشرةً، بل يكفي أن يكونا أخوين (لهما نفس العنصر الأب).

div ~ p {
  background-color: yellow;
}

جميع محددات CSS المركبة