🎯 مقدمة إلى Selectors في CSS: أداتك السحرية لتحديد العناصر!

مرحباً بك في عالم CSS! تخيل أن لديك صندوقاً مليئاً بأدوات التنسيق الرائعة (الألوان، الخطوط، الهوامش...). محددات CSS (Selectors) هي ببساطة اليد التي تمسك بهذه الأدوات وتخبرنا أي عنصر في صفحة HTML نريد تطبيق هذه الأنماط عليه. بدون المحددات، لن تعرف CSS أين تضع الأنماط! في هذا الدرس، سنتعلم معاً الأنواع الأساسية للمحددات وكيف نستخدمها.

🔍 ما هي Selectors (المحددات)؟

المحدد (Selector) هو الجزء الأول من قاعدة CSS. وظيفته الوحيدة هي تحديد أو "استهداف" عنصر HTML أو مجموعة عناصر نريد تغيير مظهرها.

selector {
  property: value;
}

مثال بسيط: تخيل أنك تريد تغيير لون جميع عناصر الفقرة (<p>) في صفحتك إلى الأزرق. المحدد هنا سيكون p، والقاعدة ستكون:

p {
  color: blue; /* هذا التعليق يشرح أننا نغير لون النص إلى أزرق */
}

المحدد p أخبر المتصفح: "يا رفيق، كل عناصر <p> التي تجدها، طبق عليها هذه القاعدة!".

📝 النوع الأول: محدد العنصر (Element Selector)

هذا هو أبسط أنواع المحددات. يستهدف جميع العناصر من نوع معين (مثل <h1>, <p>, <a>) باستخدام اسم الوسم (Tag Name) مباشرة.

مثال: نريد جعل جميع العناوين الرئيسية (<h1>) باللون الأحمر وجميع الروابط (<a>) بخط عريض.

<!-- ملف HTML -->
<h1>مرحباً بالعالم!</h1>
<p>هذه <a href="#">رابط تجريبي</a> داخل فقرة.</p>
<h1>عنوان آخر</h1>

/* ملف CSS */
h1 {
  color: red; /* يطبق اللون الأحمر على جميع عناصر h1 */
}

a {
  font-weight: bold; /* يطبق الخط العريض على جميع روابط <a> */
}

النتيجة: سيكون كلا العنوانين (<h1>) باللون الأحمر، والرابط الموجود داخل الفقرة سيكون بخط عريض.

🆔 النوع الثاني: محدد المعرف (ID Selector)

يستخدم هذا المحدد للاستهداف عنصر واحد محدد وفريد في الصفحة. نستهدفه باستخدام رمز # متبوعاً بقيمة الخاصية id للعنصر في HTML.

ملاحظة مهمة: قيمة id يجب أن تكون فريدة في الصفحة بأكملها ولا تتكرر.

مثال: نريد تلوين عنوان رئيسي معين (له id="main-title") باللون الأخضر.

<!-- ملف HTML -->
<h1 id="main-title">هذا هو العنوان الرئيسي للموقع</h1>
<h1>هذا عنوان عادي آخر</h1>

/* ملف CSS */
#main-title {
  color: green; /* يستهدف فقط العنصر الذي له id="main-title" */
}

النتيجة: فقط العنوان الأول (الذي يحمل id="main-title") سيصبح لونه أخضر. العنوان الثاني لن يتأثر لأنه لا يملك هذا المعرف.

🏷️ النوع الثالث: محدد الفئة (Class Selector)

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

مثال: نريد إنشاء تنبيهات (Alerts) بأنواع مختلفة: نجاح وتحذير.

<!-- ملف HTML -->
<p class="alert success">تم حفظ البيانات بنجاح!</p>
<p class="alert warning">يرجى التحقق من المعلومات المدخلة.</p>
<button class="success">زر نجاح</button>

/* ملف CSS */
.success {
  background-color: lightgreen; /* يطبق على أي عنصر يحمل class="success" */
  padding: 10px;
}

.warning {
  background-color: lightgoldenrodyellow; /* يطبق على أي عنصر يحمل class="warning" */
  padding: 10px;
}

.alert {
  border-left: 5px solid gray; /* يطبق على أي عنصر يحمل class="alert" */
}

النتيجة:

  • الفقرة الأولى ستأخذ خلفية خضراء (success) وإطاراً جانبياً (alert).
  • الفقرة الثانية ستأخذ خلفية صفراء (warning) وإطاراً جانبياً (alert).
  • الزر سيأخذ خلفية خضراء فقط (success) لأنه لا يحمل class="alert".

ميزة Class: يمكنك إضافة أكثر من فئة لعنصر واحد (مفصولة بمسافة)، كما يمكن استخدام نفس الفئة على أكثر من نوع من العناصر (مثل <p> و <button>).

⚖️ خلاصة: متى نستخدم كل نوع؟

  • 👥 محدد العنصر (p, h1): عندما تريد تطبيق نمط على كل العناصر من نوع معين في الصفحة.
  • 👤 محدد الـ ID (#header): عندما تريد تطبيق نمط على عنصر واحد محدد وفريد في الصفحة (مثل الهيدر الرئيسي، القائمة).
  • 👨‍👩‍👧‍👦 محدد الـ Class (.button, .active): عندما تريد تطبيق نفس النمط على مجموعة من العناصر غير مرتبطة بنوع وسم معين، أو عندما تريد إعادة استخدام النمط مراراً.

🧪 تدريب سريع: هل تستطيع التمييز؟

انظر إلى الكود التالي وتنبأ بالناتج:

<div id="box" class="highlight">محتوى صندوق</div>
<p class="highlight">فقرة مميزة</p>

div { background-color: yellow; }
.highlight { color: blue; }
#box { border: 2px solid black; }

الإجابة: سيكون للـ <div> خلفية صفراء (div) ولون نص أزرق (.highlight) وإطار أسود (#box). الفقرة (<p>) سيكون لها لون نص أزرق فقط (.highlight) لأنها تحمل تلك الفئة.