الصنف :focus
< CSS
اذهب إلى التنقل
اذهب إلى البحث
مراجعة 11:18، 7 أكتوبر 2022 بواسطة جميل-بيلوني (نقاش | مساهمات)
الصنف الزائف :focus
في CSS (أي pseudo-class) يُمثِّل عنصرًا (مثل عناصر النماذج) الذي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح.
input:focus {
color: red;
}
ملاحظة: هذا الصنف الزائف سيُحدِّد العنصر الذي استقبل التركيز فقط، استعمل الصنف الزائف :focus-within
لتحديد العنصر الذي يحتوي على العنصر الذي استقبل التركيز.
الشكل العام لهذا المحدد:
:focus
أمثلة
لاحظ كيف سيتغير تنسيق العنصر <input>
عندما يستقبل التركيز:
<input class="red-input" value="سأكون احمر اللون عند التركيز"><br>
<input class="blue-input" value="سأكون أزرق اللون عند التركيز">
شيفرة CSS:
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 8.0 | 7.0 | 1.0 |
انظر أيضًا
- صفحة الصنف الزائف
focus-within:
الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز.
مصادر ومواصفات
- معيار HTML Living Standard.
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).