المحددات في CSS: الوسم والكلاس والمعرّف وأكثر

قبل أن تلوّن عنصراً أو تغيّر حجمه، يجب أن تخبر المتصفح أي عنصر تقصد بالضبط. هذه هي وظيفة المحددات (Selectors). كلما أتقنتها، صار بإمكانك تنسيق أي جزء من الصفحة دون أن تلمس كود HTML كثيراً. في هذا الدرس ستتعلم أهم المحددات، وكيف يقرر المتصفح من يفوز عندما تتعارض قاعدتان.

المحددات الأساسية الثلاثة

1. محدد الوسم (Type Selector): يختار كل العناصر من نوع معين:

p {
  line-height: 1.8;
}

2. محدد الكلاس (Class Selector): يختار العناصر التي تحمل كلاساً معيناً، ويبدأ بنقطة:

.warning {
  color: darkred;
}

ويمكن أن يحمل العنصر الواحد أكثر من كلاس، بينها مسافة:

<p class="warning big">انتبه!</p>

3. محدد المعرّف (ID Selector): يختار العنصر الوحيد الذي له id معين، ويبدأ بعلامة #:

#main-title {
  font-size: 40px;
}

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

كلاس أم id؟

في التنسيق، استخدم الكلاس في أغلب الأحوال، لأنه قابل لإعادة الاستخدام على أي عدد من العناصر. واحتفظ بالـ id للروابط الداخلية #section ولـ JavaScript.

المحدد العام

النجمة * تختار كل العناصر في الصفحة. تُستخدم غالباً لضبط إعداد يخص الجميع:

* {
  box-sizing: border-box;
}

ستفهم معنى هذا السطر في درس نموذج الصندوق.

التجميع

إذا أردت نفس التنسيق لأكثر من محدد، افصل بينها بفاصلة:

h1, h2, h3 {
  color: #141826;
  font-weight: 700;
}

بدلاً من كتابة ثلاث قواعد متطابقة، كتبت قاعدة واحدة.

المحددات المركبة

المحدد الوصفي (Descendant Selector): مسافة بين محددين تعني «العنصر الثاني داخل الأول، في أي عمق»:

/* الروابط الموجودة داخل nav فقط */
nav a {
  color: white;
}

محدد الابن المباشر (Child Selector): العلامة > تعني «الابن المباشر فقط، وليس الأحفاد»:

ul > li {
  font-weight: bold;
}

الوسم مع الكلاس معاً: بدون مسافة، يعني «عنصر من هذا النوع ويحمل هذا الكلاس»:

/* فقرات تحمل الكلاس intro فقط، وليس أي عنصر آخر يحمله */
p.intro {
  font-size: 20px;
}

المسافة تغيّر المعنى

p.intro تعني «فقرة عليها الكلاس intro». أما p .intro (بمسافة) فتعني «عنصر عليه الكلاس intro داخل فقرة». مسافة واحدة تغيّر النتيجة تماماً.

الحالات الزائفة (Pseudo-classes)

تختار العنصر في حالة معينة، وتُكتب بنقطتين : بعد المحدد:

/* عند مرور الفأرة فوق الزر */
button:hover {
  background-color: #4a4ad6;
}

/* عندما يكون الحقل في وضع الكتابة */
input:focus {
  border-color: #5b5bf0;
}

/* أول عنصر في القائمة */
li:first-child {
  color: green;
}

/* العناصر الزوجية: مفيدة لتلوين صفوف الجداول */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

هذه الحالات تجعل الصفحة تتفاعل مع المستخدم دون أي JavaScript.

من يفوز؟ قوة المحدد (Specificity)

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

المحدد	القوة
style="..." مباشرة	الأقوى
المعرّف #id	قوي
الكلاس .class والحالات :hover	متوسط
الوسم p	ضعيف

مثال:

#intro { color: blue; }
.text  { color: red; }
p      { color: green; }

<p id="intro" class="text">ما لوني؟</p>

الفقرة ستكون زرقاء، لأن محدد المعرّف أقوى من الكلاس والوسم، حتى لو جاءت قاعدته أولاً. وعندما تتساوى القوة، تفوز القاعدة الأخيرة في الترتيب.

جرّب بنفسك

مرّر الفأرة فوق الزر، ولاحظ تلوين الصفوف الزوجية في القائمة، وأن الرابط داخل nav فقط تغيّر لونه. ثم جرّب تغيير even إلى odd:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; } nav a { color: white; background: #5b5bf0; padding: 4px 10px; } li:nth-child(even) { background-color: #ececff; } li:first-child { font-weight: bold; } #intro { color: blue; } .text { color: red; } button { padding: 8px 16px; border: none; background: #ddd; } button:hover { background: #5b5bf0; color: white; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان النقطة أو العلامة #: intro { } تبحث عن وسم اسمه intro. اكتب .intro للكلاس و #intro للمعرّف.
• مسافة غير مقصودة: p .intro تختلف تماماً عن p.intro.
• الإفراط في استخدام id للتنسيق: قوته العالية تجعل تغيير التنسيق لاحقاً صعباً، فتضطر لكتابة محددات أقوى وأقوى.

اختبر نفسك

سؤال

ماذا يختار المحدد nav a؟

كل عناصر nav وكل الروابطالروابط الموجودة داخل nav فقطعناصر nav التي داخل رابط

سؤال

عنصر عليه id='x' و class='y'، والقاعدتان .y { color: red; } ثم #x { color: blue; }. ما لونه؟

أسودأحمرأزرق

الخلاصة

• محدد الوسم p للكل، والكلاس .name لمجموعة، والمعرّف #name لعنصر واحد.
• الفاصلة تجمع عدة محددات، والمسافة تعني «داخل»، و > تعني «ابن مباشر».
• الحالات مثل :hover و :focus و :nth-child تختار العنصر في وضع معين.
• قوة المحدد: style ثم #id ثم .class ثم الوسم، وعند التساوي يفوز الأخير.
• فضّل الكلاس في التنسيق، فهو مرن وقابل لإعادة الاستخدام.