| الفئة الزائفة | الحالة والتأثير المستهدف | الاستخدام الشائع |
|---|---|---|
| hover | عند تمرير مؤشر الفأرة فوق العنصر | تغيير لون الأزرار أو الروابط لجعل الموقع تفاعلياً حيوياً |
| focus | عند تحديد العنصر بالنقر أو بلوحة المفاتيح | تمييز حقول الإدخال في النماذج أثناء كتابة البيانات |
| focus-visible | عند تحديد العنصر عبر لوحة المفاتيح فقط | تحسين تجربة التصفح لمستخدمي الكيبورد دون التأثير على الماوس |
| active | في لحظة الضغط الفعلي بالنقر على العنصر | إعطاء انطباع بصري بأن الزر تم النقر عليه لأسفل |
| checked | عندما يكون خيار الاختيار محدد ومفعلاً | تنسيق صناديق الاختيار من نوع تشيك بوكس وراديو |
| disabled أو enabled | لعناصر النماذج والأزرار المعطلة أو المتاحة | رماد وتعتيم الأزرار غير القابلة للنقر لمنع الإرسال بالخطأ |
| visited أو link | للروابط التي زارها المستخدم أو التي لم يزرها | تمييز روابط المقالات المقروءة سابقاً بموقعك ونوفيل لسهولة التصفح |
الفئات الزائفة (Pseudo-classes) تتيح تنسيق العناصر بناءً على حالتها أو تفاعل المستخدم معها، دون أن تكون هذه الحالة موجودة في HTML.
**الأكثر استخداماً:**
**:hover** — عندما يمرر المستخدم الفأرة فوق العنصر.
**:focus** — عندما يكون العنصر محدداً (عبر لوحة المفاتيح أو النقر). مهم جداً للوصولية (Accessibility).
**:focus-visible** — مثل :focus لكن يظهر فقط عند التنقل بلوحة المفاتيح (لا الماوس).
**:active** — لحظة الضغط على العنصر.
**:checked** — عندما يكون checkbox أو radio button محدداً.
**:disabled / :enabled** — لعناصر النموذج المعطّلة أو المفعّلة.
**:visited / :link** — للروابط التي زارها المستخدم أو لم يزرها بعد.
| 1 | a:hover { text-decoration: underline; } |
| 2 | input:focus { outline: 2px solid #3b82f6; } |
| 3 | button:active { transform: scale(0.97); } |
| 4 | input[type="checkbox"]:checked + label { font-weight: bold; } |
مثال 1: زر تفاعلي كامل
| 1 | .btn { |
| 2 | background: #3b82f6; |
| 3 | color: white; |
| 4 | padding: 10px 24px; |
| 5 | border: none; |
| 6 | border-radius: 8px; |
| 7 | cursor: pointer; |
| 8 | transition: all 0.2s ease; |
| 9 | } |
| 10 | |
| 11 | .btn:hover { |
| 12 | background: #2563eb; |
| 13 | box-shadow: 0 4px 12px rgba(37,99,235,0.4); |
| 14 | } |
| 15 | |
| 16 | .btn:active { |
| 17 | transform: scale(0.96); |
| 18 | background: #1d4ed8; |
| 19 | } |
| 20 | |
| 21 | .btn:focus-visible { |
| 22 | outline: 3px solid #93c5fd; |
| 23 | outline-offset: 2px; |
| 24 | } |
| 25 | |
| 26 | .btn:disabled { |
| 27 | opacity: 0.5; |
| 28 | cursor: not-allowed; |
| 29 | } |
مثال 2: تنسيق checkbox مخصص
| 1 | input[type="checkbox"]:checked + label { |
| 2 | color: #10b981; |
| 3 | font-weight: 600; |
| 4 | text-decoration: line-through; |
| 5 | } |