| المحدد | الرمز أو طريقة الكتابة | الوظيفة والاستهداف | متى تستخدمه |
|---|---|---|---|
| المحدد الشامل | علامة النجمة * | يستهدف كل عناصر الصفحة بلا استثناء | يُستخدم بحذر لإعادة ضبط الهوامش والحشو الافتراضي للموقع |
| محدد العنصر | اسم الوسم مباشرة مثل p أو h1 | يستهدف جميع العناصر التي تحمل نفس اسم الوسم في الموقع | يُستخدم للأنماط والتنسيقات الأساسية والثابتة للنصوص والعناوين |
| محدد الفئة Class | نقطة تليها اسم الفئة مثل .className | يستهدف أي عنصر يحتوي على هذه الفئة في الكود وهو الأكثر استخداماً | يُستخدم للأنماط والمكونات المتكررة مثل الأزرار والبطاقات والتنبيهات |
| محدد المعرّف ID | علامة الهاشتاج تليها اسم المعرّف مثل #idName | يستهدف عنصراً واحداً فريداً بعينه في الصفحة بأكملها لأن خصوصيته عالية | يُستخدم لعناصر التصميم الفريدة التي لا تتكرر في الصفحة مثل الهيدر أو شريط التنقل الرئيسي |
المحدد (Selector) هو الجزء الذي يحدد أيّ عناصر HTML ستُطبَّق عليها الأنماط. هناك أربعة أنواع أساسية:
**١. المحدد الشامل (*)** يستهدف كل عناصر الصفحة. كثيراً ما يُستخدم لإعادة ضبط الهوامش والحشو.
**٢. محدد العنصر (Element Selector)** يستهدف اسم وسم HTML مباشرةً مثل `p` أو `h1` أو `div`.
**٣. محدد الـ Class (.className)** يستهدف أي عنصر لديه هذه الـ class في سمة `class`. الأكثر استخداماً في المشاريع الحقيقية.
**٤. محدد الـ ID (#idName)** يستهدف عنصراً واحداً بعينه عبر سمة `id` الفريدة. خصوصيته عالية.
**متى تستخدم كل منها؟** - استخدم **class** للأنماط المتكررة (أزرار، بطاقات، تنبيهات). - استخدم **ID** لعناصر فريدة (شريط التنقل الرئيسي، التذييل). - استخدم **element** للأنماط الأساسية (h1, p, a). - استخدم ***** بحذر لإعادة الضبط فقط.
| 1 | * { margin: 0; padding: 0; } /* شامل */ |
| 2 | p { color: #333; } /* عنصر */ |
| 3 | .card { border-radius: 8px; } /* class */ |
| 4 | #logo { width: 120px; } /* ID */ |
مثال 1: تطبيق عملي: بناء قائمة بمحددات متعددة
| 1 | * { box-sizing: border-box; } |
| 2 | |
| 3 | ul { list-style: none; padding: 0; } |
| 4 | |
| 5 | .menu-item { |
| 6 | padding: 10px 16px; |
| 7 | border-bottom: 1px solid #eee; |
| 8 | } |
| 9 | |
| 10 | .menu-item.active { |
| 11 | background-color: #3b82f6; |
| 12 | color: white; |
| 13 | } |
| 14 | |
| 15 | #nav { background: #1e293b; } |