9. المحددات الأساسية: محددات المعرف (#)
تستهدف محددات المعرف (ID selectors) عنصراً واحداً فريداً داخل مستند HTML. يتم تحديدها برمز الهاش أو المربع (#).
تعريف واستخدام المعرف (ID)
-
HTML: أضف سمة
idإلى عنصر واحد فقط. htmlموقعي الإلكتروني
-
CSS: استهدف المعرف عن طريق وضع رمز المربع (
#) قبل اسم المعرف. css #main-header { background-color: #333; color: white; padding: 20px; }
الفرق الجوهري بين الفئة (Class) والمعرف (ID)
| الميزة | محدد الفئة (.) | محدد المعرف (#) |
|---|---|---|
| الاستخدام | يستخدم مرات عديدة في الصفحة | يستخدم مرة واحدة فقط لكل صفحة |
| الغرض | تنسيق المكونات القابلة لإعادة الاستخدام | استهداف عناصر فريدة ومحددة للغاية (غالباً لـ JS أو الوصول) |
| التخصيص (Specificity) | منخفض/متوسط | عالي جداً (يصعب تجاوزه) |
أفضل ممارسات CSS الحديثة:
في تطوير الويب الحديث، يميل المطورون إلى الاعتماد بشكل حصري تقريباً على محددات الفئات (Class) للتنسيق. غالباً ما يتم حجز محددات المعرفات (ID) لمعالجة JavaScript، أو الروابط الداخلية (Anchor tags)، أو ميزات الوصول (Accessibility)، بدلاً من تعريف الأنماط الجمالية.
لماذا نتجنب المعرفات للتنسيق؟ لأن تخصيصها العالي يجعل ملفات التنسيق صعبة الإدارة وهشة (غير مرنة).