المحددات Selectors ( Tag - Class - Id ) - تعلم CSS

في هذا الدرس سنتعرف سويًا على أحد المفاهيم الأساسية في لغة CSS، وهي ما يُعرف بالمحددات أو Selectors. تعتبر المحددات هي المفتاح الرئيسي الذي من خلاله نقوم بتطبيق التنسيقات المختلفة على عناصر صفحة الويب المكتوبة بلغة HTML.

أولًا: طرق كتابة كود CSS

قبل التعمق في أنواع المحددات، من المهم أن نُذكّر بأن كود CSS يمكن كتابته بثلاث طرق رئيسية:

1. الطريقة المضمنة (Inline): داخل وسم HTML نفسه باستخدام خاصية style.

2. الطريقة الداخلية (Internal): داخل وسم <style> داخل مستند HTML.

3. الطريقة الخارجية (External): من خلال ربط ملف CSS خارجي بصفحة HTML باستخدام وسم <link> في رأس الصفحة.

في معظم الحالات يُفضل استخدام الطريقة الخارجية لتنظيم الكود وجعل المشروع أكثر احترافية.

---

ثانيًا: بنية كود CSS

يتكوّن كود CSS من:

• المُحدد (Selector): هو العنصر الذي نريد تنسيقه.

• الخصائص (Properties): مثل اللون، الحجم، نوع الخط، وغيرها.

• القيم (Values): وهي القيمة التي نُعطيها للخاصية.

• الأقواس المعقوفة {}: يتم كتابة الخصائص والقيم بداخلها.

• النقطتين الرأسيتين : بين الخاصية والقيمة.

• الفاصلة المنقوطة ; بين كل خاصية وأخرى.

مثال:

p {
  color: red;
  font-size: 16px;
}

---

ثالثًا: أنواع المحددات في CSS

1. محدد الوسوم (Tag Selector)

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

p {
  color: red;
}

2. محدد الفئة (Class Selector)

يُستخدم لتطبيق تنسيق على عناصر محددة تحمل نفس اسم الفئة (class). ويُكتب باستخدام النقطة (.) قبل اسم الفئة:

HTML:

<p class="custom">هذا نص مميز</p>

CSS:

.custom {
  color: blue;
}

يمكن أيضًا استخدام نفس الفئة على أكثر من عنصر HTML، وسيتم تطبيق التنسيق عليها جميعًا.

3. محدد المعرف (ID Selector)

يُستخدم لتطبيق تنسيق على عنصر واحد فقط يحمل معرفًا فريدًا. ويُكتب باستخدام رمز # قبل اسم المعرف:

HTML:

<h1 id="main-title">عنوان رئيسي</h1>

CSS:

#main-title {
  color: green;
}

لاحظ أن الـ ID لا يُفضل تكراره لأكثر من عنصر في نفس الصفحة.

---

رابعًا: الجمع بين المحددات

يمكن الجمع بين أكثر من محدد في قاعدة واحدة إذا كنا نريد تطبيق نفس التنسيق على أكثر من عنصر:

p, h1 {
  color: orange;
}

كما يمكن دمج محدد الوسم مع الكلاس أو الـ ID لتحديد عنصر بدقة:

h1.custom {
  color: purple;
}

هذا يعني أن التنسيق سيتم تطبيقه فقط على العناصر من نوع <h1> والتي تحمل الكلاس "custom".

---

خامسًا: التحديد العام (Universal Selector)

إذا أردت تطبيق تنسيق معين على جميع عناصر الصفحة دون استثناء، يمكنك استخدام التحديد العام عن طريق علامة النجمة *:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

---

سادسًا: أولوية المحددات

عند وجود أكثر من تنسيق لنفس العنصر، فإن المتصفح يطبق قواعد الأولوية (Specificity)، حيث تكون الأولوية حسب الترتيب التالي:

1. Inline Style – الأعلى أولوية.

2. ID Selector.

3. Class Selector.

4. Tag Selector.

5. Universal Selector – الأقل أولوية.

وإذا تساوت الأولوية، يتم تطبيق آخر كود تمت قراءته.

---

خلاصة الدرس

في هذا الدرس تعرفنا على:

• أساسيات كتابة كود CSS.

• بنية قاعدة CSS.

• أنواع المحددات: الوسوم، الكلاسات، الـ ID، التحديد العام.

• طريقة استخدام كل محدد بشكل عملي.

• كيفية الجمع بين أكثر من محدد.

• ترتيب أولوية تطبيق التنسيقات.

---

سؤال الدرس

ما الفرق بين الكلاس والآي دي في CSS من حيث الاستخدام وأولوية التنفيذ؟

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

---

نتمنى أن يكون الشرح واضح ومفيد، تابع معنا الدروس القادمة للحصول على محتوى تعليمي مبسط ومنظم لتعلم تصميم المواقع.
شكرًا لمتابعتك، ونراك في الدرس القادم بإذن الله.

شاهد الفيديو