الفئات الزائفة في CSS
تعرف مسبقاً محددات الوسم وclass وid والسمة. بقيت طبقة أخرى: أحياناً لا تريد المظهر نفسه دائماً؛ تريد تغييراً عندما يكون المؤشر فوق الزر، أو عندما يصل المستخدم بالـ Tab إلى الحقل، أو عندما فُتح الرابط من قبل. هنا تأتي الفئة الزائفة — دون class جديد في HTML.
ما معنى الفئة الزائفة؟
الفئة الزائفة كلمة تُلصق بالمحدد بـ نقطتين مفردتين (:). لا ترى في HTML شيئاً مثل class="hover". المتصفح يفعّل القاعدة عندما يتحقق الشرط: المؤشر فوق العنصر، أو التركيز، أو سجل الرابط، أو موضع العنصر بين أبناء الأب.
فئات زائفة شائعة
ابدأ بهذه. هناك أسماء أكثر، لكنها تكفي لبداية واجهة المستخدم.
📊 فئات زائفة يومية في CSS
| الفئة الزائفة | متى تُفعَّل | مثال |
|---|---|---|
:hover |
المؤشر فوق العنصر | a:hover |
:focus |
العنصر عليه تركيز (لوحة مفاتيح أو نقر) | input:focus |
:visited |
الرابط زُرِع سابقاً (بحدود الخصوصية) | a:visited |
:first-child |
العنصر أول ابن لأبيه | li:first-child |
:nth-child(n) |
الابن رقم n أو فردي/زوجي | tr:nth-child(odd) |
:disabled |
عنصر النموذج معطّل | button:disabled |
التحويم — :hover
مع :hover يتغيّر المظهر عندما يكون المؤشر فوق العنصر. الزر والرابط يبدوان حيّين بتغيير صغير — لا بقفزة في التخطيط.
تحويم — رد فعل الزر
cssbutton:hover {
background-color: #0f766e;
color: #fff;
}ملاحظة عن التحويم
أبقِ التغيير لطيفاً. على اللمس «التحويم» ليس كسطح المكتب؛ لا تضع معلومة ضرورية داخل :hover فقط.
التركيز — :focus
:focus يلتقط العنصر النشط الآن — مثلاً وصلت إليه بـ Tab. بلا حلقة تركيز واضحة يضيع مستخدم لوحة المفاتيح أين هو في النموذج.
تركيز — حلقة واضحة على input
cssinput:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}التحويم والتركيز كلاهما مطلوب
التحويم للمؤشر. التركيز لـ «هذا التحكم نشط الآن». لا تحذف outline إلا إذا وضعت بديلاً بنفس الوضوح.
الروابط المزارة — :visited
:visited يلوّن الروابط التي يعتقد المتصفح أنك فتحتها من قبل. غالباً اللون فقط (وبعض الخصائص المحدودة). لا تعتمد على تغيير padding أو التخطيط لأسباب الخصوصية.
مزور — لون هادئ للرابط
cssa:visited {
color: #6b21a8;
}ترتيب حالات الرابط
إن كتبت عدة حالات معاً، ترتيب آمن شائع: link → visited → hover → focus (أحياناً LVHA). يساعد على إبقاء التحويم والتركيز مرئيين على الروابط المزارة أيضاً.
الابن الأول — :first-child
:first-child يعني أن العنصر أول ابن لأبيه — ليس «أول li في الصفحة كلها»، بل الأول بين إخوته تحت نفس الأب.
الابن الأول — تمييز بند القائمة الأول
cssli:first-child {
font-weight: 700;
}الخطوة التالية: :nth-child
بـ :nth-child(odd) أو :nth-child(3) تحصل على صفوف مخططة أو «كل ثالث». أتقن :first-child أولاً ثم انتقل لهذه الأنماط.
عادات عملية
- فئة زائفة = نقطتان مفردتان (
:hover)؛ عنصر زائف = نقطتان مزدوجتان (::) — الجلسة القادمة - اربط التحويم التفاعلي دائماً بـ
:focusواضح - اجعل لون visited هادئاً
- اختبر بـ Tab أيضاً، لا بالمؤشر فقط
جرّبها بنفسك
- صفحة قصيرة مع
<button>و<input>وبضعة روابط و<ul>بثلاثة<li>. - أضف
button:hover { background-color: #0f766e; color: #fff; }وحرّك المؤشر فوق الزر. - أضف
input:focus { outline: 2px solid #0f766e; }وادخل الحقل بـ Tab. - أضف
a:visited { color: #6b21a8; }، افتح رابطاً وارجع. - أضف
li:first-child { font-weight: 700; }— يغلظ البند الأول فقط.
أخطاء شائعة
- كتابة
::hoverبدل:hover— النقطتان المزدوجتان للعناصر الزائفة - تنسيق التحويم وحذف outline التركيز بلا بديل
- توقع حرية كاملة من
:visitedلكل خاصية - ظن أن
p:first-childيعني «أول فقرة في أي مكان بالصفحة» - وضع نص مهم داخل
:hoverفقط فلا يراه مستخدم اللمس
ملخص
- الفئة الزائفة تختار حسب الحالة أو الموضع بنقطتين مفردتين
:hoverو:focusيعطيان رد فعل؛ أبقِ كليهما:visitedيلوّن الرابط المفتوح ضمن حدود المتصفح:first-childيأخذ أول ابن للأب؛:nth-childالخطوة التالية- نقطتان مفردتان = فئة زائفة؛ مزدوجتان = عنصر زائف
- تدرب بالمؤشر وTab وقائمة قصيرة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى