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

محددات CSS

لكل قاعدة CSS مهمتان: أن تحدّد ما الذي سيُنسَّق، وكيف سيُنسَّق. تدرّبتَ على «الكيف» مع الخصائص (property) والقيم والوحدات. وفي هذه الجلسة ننتقل إلى «ما الذي»، أي المحدِّد (selector) الذي يأتي في بداية القاعدة.

ما هي محددات CSS؟

المحدِّد نمط يخبر المتصفح بالعناصر التي تُطبَّق عليها التصريحات الموجودة داخل الكتلة. فإذا تطابق المحدد مع عنصر في الصفحة، حصل ذلك العنصر على كل الأنماط الموجودة داخل { }.

أنواع المحددات الأساسية في لمحة

ابدأ بهذه الأنواع الأربعة. ستتعرف لاحقًا على المُركِّبات (combinators) والسمات (attributes) والأصناف الزائفة (pseudo-classes)، لكن أتقن أولًا محدد العنصر وclass وid و*.

📊 محددات CSS الأساسية

المحدد ما الذي يطابقه مثال
العنصر (type) كل العناصر التي تحمل اسم هذا الوسم p { … }
class العناصر التي تحمل هذا الـ class .card { … }
id العنصر الوحيد الذي يحمل هذا الـ id #hero { … }
العام (universal) كل العناصر (استخدمه بحذر) * { … }

محدد العنصر (type)

محدد العنصر هو اسم الوسم نفسه، بلا نقطة وبلا علامة #. فالمحدد h1 ينسّق كل وسم <h1> في الصفحة، وp ينسّق كل الفقرات. هو أداتك الأوسع حين تريد مظهرًا أساسيًا موحّدًا لوسم معيّن.

محدد العنصر للعناوين والفقرات

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

متى يفيد محدد type؟

استخدمه للإعدادات العامة في الموقع: لون نص body وسُمك العناوين ومسافات القوائم. أما إذا كان المطلوب أن تبدو بعض الفقرات فقط بشكل خاص، فاستخدم class بدل تغيير شكل كل وسوم p.

محدد class

يبدأ محدد class بنقطة (.) ثم اسم الـ class. وفي HTML تضع على العنصر class="card". ويمكن استخدام الـ class نفسه على أي عدد من العناصر، ولهذا يُعدّ الأداة الأساسية للتنسيقات القابلة لإعادة الاستخدام.

محدد class لبطاقات قابلة لإعادة الاستخدام

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

يجب أن يطابق HTML اسم الـ class تمامًا

القاعدة .card لا تنسّق إلا العناصر التي تحمل فعلًا class="card" (أو عدة classes من بينها card). ويجب أن يتطابق الإملاء حرفًا بحرف، فـ .Card يختلف عن .card.

محدد id

يبدأ محدد id بعلامة # ثم اسم الـ id، وفي HTML تكتب id="hero". يجب أن يكون الـ id فريدًا في الصفحة، أي لعنصر واحد فقط. فضّل class في معظم التنسيقات، واحتفظ بـ id لعنصر مهم وفريد حقًا في الصفحة.

محدد id للافتة فريدة

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

المحدد العام (*)

يطابق المحدد * كل العناصر. يُستخدم أحيانًا لإعادة ضبط بسيطة، مثل تحديد box-sizing، لكن تطبيق ألوان أو هوامش على كل شيء قد يُفسد التصميم. لذلك استخدم محددات أدق للمظهر اليومي للصفحة.

استخدام المحدد العام بحذر

css
CSS Code 
* {
box-sizing: border-box;
}

الجمع بين المحددات في صفحة واحدة

تجمع ورقة الأنماط (stylesheet) الحقيقية بين الأنواع كلها: الإعدادات الأساسية بمحدد العنصر، والمكوّنات المتكررة بـ class، والأهداف الفريدة النادرة بـ id. تُظهر هذه الورقة الصغيرة العادة الصحيحة، فليست كل قاعدة بحاجة إلى id.

مزيج صغير من أنواع المحددات في صفحة

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

class أم id؟ عادة عملية

  • فضّل class للأزرار والبطاقات وروابط التنقل وكل ما قد تعيد استخدامه
  • استخدم id حين يكون الهدف فريدًا فعلًا (لافتة واحدة في الصفحة، أو مربع البحث الرئيسي)
  • لا تُنشئ id جديدًا لكل صندوق منسَّق؛ فهذا يمنع إعادة الاستخدام ويسبب مشكلات في دروس الـ cascade لاحقًا

جرّبها بنفسك

  1. أضف إلى صفحة تجريبية <h1> وفقرتين <p> و<div class="card"> و<section id="hero">.
  2. اكتب قاعدة محدد عنصر لـ h1 وp.
  3. نسّق .card بحشو (padding) وخلفية فاتحة وحدّ (border).
  4. نسّق #hero بخلفية داكنة ونص فاتح.
  5. اختياري: أضف * { box-sizing: border-box; } ولاحظ أن الحشو داخل البطاقة أصبح أسهل في التوقع.

أخطاء شائعة

  • كتابة card { } وأنت تقصد .card { }: من دون النقطة يبحث المتصفح عن وسم اسمه card، وهو غير موجود في HTML
  • كتابة hero { } بدل #hero { }: نسيان علامة #
  • كتابة class="card" في HTML و.crd في CSS: لا يوجد تطابق، فلا يُطبَّق أي تنسيق
  • إعطاء id نفسه لعدة عناصر: يجعل HTML غير صالح ويجعل الاستهداف غير متوقع
  • الاعتماد على محدد type وحده لتصميم كتلة واحدة: يتغير شكل كل p أو div في الصفحة بينما كنت تريد كتلة واحدة فقط

الخلاصة

  • المحددات تختار العناصر التي ستتلقى تنسيقات القاعدة
  • محدد العنصر هو اسم الوسم (h1، p)
  • محدد class يبدأ بنقطة (.card) ويطابق السمة class في HTML
  • محدد id يبدأ بعلامة # (#hero) ويجب أن يستهدف عنصرًا فريدًا واحدًا
  • * يطابق كل شيء، وهو مفيد لإعادة ضبط مدروسة لا لتزيين الصفحة كلها
  • فضّل class للمكوّنات القابلة لإعادة الاستخدام، واجعل استخدام id نادرًا ولعناصر فريدة

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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