جاري التحميل...

مركّبات المحددات في CSS

تعرف مسبقاً كيف تستهدف العناصر بمحددات النوع وclass وid. المهارة التالية: تنسيق عنصر بسبب موقعه بالنسبة لعنصر آخر — داخل قسم، أو كابن مباشر فقط، أو مباشرة بعد عنوان.

ما هي مركّبات المحددات في CSS؟

المركّب (combinator) رمز — أو مسافة — يوضع بين محدّدين ليخبر المتصفح كيف يجب أن يرتبط هذان الجزءان في شجرة HTML. الجانب الأيسر مرجع؛ والجانب الأيمن هو ما يتلقى الأنماط فعلاً.

أربعة مركّبات في لمحة

تعلّم الرموز أولاً، ثم مارس كلاً منها بمثال قصير.

📊 مركّبات المحددات في CSS

المركّب الرمز ماذا يطابق مثال
النسل (مسافة) أي تطابق متداخل داخل سلف article p
الابن > الابن المباشر فقط ul > li
الشقيق المجاور + الشقيق التالي مباشرة h2 + p
الشقيق العام ~ أي شقيق لاحق في نفس المستوى h2 ~ p

مركّب النسل (المسافة)

المسافة بين المحددين تعني: «طابق المحدّد الثاني في أي مكان داخل الأول». العمق لا يهم — الأحفاد والمستويات الأعمق تطابق أيضاً.

النسل — فقرات داخل article

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

متى يفيد النسل

استخدم مركّب النسل لمظهر مشترك داخل منطقة: كل الفقرات في article، كل الروابط في nav. إن أردت أبناء مباشرين فقط وكان التطابق العميق واسعاً جداً، انتقل إلى مركّب الابن.

مركّب الابن (>)

يطابق > الأبناء المباشرين فقط. عنصر أعمق من مستوى واحد لا يطابق.

الابن — عناصر القائمة المباشرة فقط

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

المسافة مقابل > بصورة واحدة

إذا كان HTML: <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul> فإن .menu > li ينسّق li الخارجي فقط. أما نسل .menu li فينسّق الخارجي والمتداخل معاً.

مركّب الشقيق المجاور (+)

يطابق + العنصر الذي يأتي مباشرة بعد مرجع الشقيق — نفس الأب، الجار التالي، بلا عنصر بينهما.

الشقيق المجاور — أول فقرة بعد h2

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

نمط شائع

كثير من التخطيطات تريد أن تبدو الفقرة الأولى بعد العنوان مختلفة قليلاً (نص افتتاحي). h2 + p يستهدف ذلك الجار دون إعطاء كل فقرة class خاصاً.

مركّب الشقيق العام (~)

يطابق ~ كل شقيق لاحق يناسب المحدّد الثاني — لا التالي المباشر فقط. ما زال يجب أن يشتركا في الأب نفسه.

الشقيق العام — فقرات بعد h2

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

+ مقابل ~

  • h2 + p — الفقرة التي تجلس مباشرة بعد h2 فقط
  • h2 ~ p — كل p شقيق يلي ذلك h2 (الأول والثاني والثالث…)
    إذا جلس div بين h2 وp، يفشل h2 + p لتلك الفقرة، بينما قد يطابق h2 ~ p فقرات شقيقة لاحقة.

اختيار مركّب

  • فضّل النسل لـ «كل عناصر هذا النوع داخل هذه المنطقة»
  • فضّل الابن حين يوسّع التداخل التنسيق إلى قوائم أو بطاقات لم تقصدها
  • فضّل الشقيق المجاور لنمط جار بخطوة واحدة (عنوان → أول فقرة)
  • فضّل الشقيق العام حين يجب أن تتشارك عدة أقران بعد علامة مظهراً واحداً
    أبقِ السلاسل قصيرة وأنت تتعلم. السلاسل الطويلة قوية — وسهلة الكسر إن تغيّر هيكل HTML.

جرّبها بنفسك

  1. ابنِ صفحة قصيرة فيها <article> يحتوي <h2> ثم <p> ثم <div> بداخله <p> ثم <p> آخر بعد الـ div.
  2. أضف article p { color: #334155; } وتأكد أن كلا الفقرتين داخل المقال تتغيران (نسل).
  3. غيّر القاعدة إلى article > p { color: #0f766e; } وحدّث — يجب أن تأخذ اللون فقرات الابن المباشر فقط؛ لا p المتداخل داخل div.
  4. أضف h2 + p { font-weight: bold; } وتأكد أن الفقرة مباشرة بعد العنوان تصبح عريضة فقط.
  5. اختياري: جرّب h2 ~ p { max-width: 36rem; } ولاحظ أن كل فقرة شقيقة بعد العنوان تأخذ max-width.

أخطاء شائعة

  • استخدام النسل وأنت تقصد الابن — تتلقى الويدجتات المتداخلة أنماطاً أردتها للمستوى الأعلى فقط
  • توقع أن h2 + p يتخطى عنصراً بين العنوان والفقرة — المجاور يعني مباشر
  • قراءة المركّب بالعكس — الأنماط تُطبَّق على محدّد اليمين لا مرجع اليسار
  • وضع فاصلة حيث أردت مركّباً (h2, p يجمع محددات؛ لا يعني «p بعد h2»)
  • افتراض أن ~ يشترط تجاوراً لصقاً — الشقيق العام يطلب «لاحقاً في نفس المستوى» لا «الباب المجاور»

ملخص

  • تربط المركّبات المحددات بعلاقة HTML: داخل، ابن مباشر، شقيق تالٍ، أو أشقاء لاحقون
  • المسافة = نسل (أي عمق)؛ > = ابن مباشر فقط
  • + = الشقيق التالي مباشرة؛ ~ = أي شقيق لاحق مطابق
  • تُطبَّق الأنماط على المحدّد يمين المركّب
  • اختر أضيق مركّب ما زال يعبّر عن قصدك
  • تمرّن باستبدال المسافة بـ > ومقارنة + مع ~ على الصفحة نفسها

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي