الفرق بين المراجعتين ل"CSS/:focus"

مراجعة 10:37، 21 أكتوبر 2018

الصنف الزائف ‎: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)‎.

@@ سطر 42: / سطر 42: @@
 |1.0
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:focus-within|focus-within:]]</code> الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز.
+== مصادر ومواصفات ==
 *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-focus HTML Living Standard].
 *مسودة [https://drafts.csswg.org/selectors-4/#focus-pseudo Selectors Level 4].