الفرق بين المراجعتين لصفحة: «CSS/:active»
لا ملخص تعديل |
لا ملخص تعديل |
||
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الصنف <code>:active</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE: الصنف <code>:active</code>}}</noinclude> | ||
الصنف الزائف <code>:active</code> في CSS (أي pseudo-class) يُمثِّل | الصنف الزائف <code>:active</code> في CSS (أي pseudo-class) يُمثِّل عناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر. | ||
من الشائع استخدام الصنف الزائف <code>:active</code> على عناصر <code>[[HTML/a|<a>]]</code> أو <code>[[HTML/button|<button>]]</code>، لكن يمكن استخدامه على بقية العناصر أيضًا:<syntaxhighlight lang="css"> | من الشائع استخدام الصنف الزائف <code>:active</code> على عناصر <code>[[HTML/a|<a>]]</code> أو <code>[[HTML/button|<button>]]</code>، لكن يمكن استخدامه على بقية العناصر أيضًا:<syntaxhighlight lang="css"> | ||
سطر 16: | سطر 16: | ||
== أمثلة == | == أمثلة == | ||
لاحظ ترتيب تطبيق الأصناف الزائفة على عنصر <code><a></code>:<syntaxhighlight lang="html"> | لاحظ ترتيب تطبيق الأصناف الزائفة على عنصر <code><a></code>:<syntaxhighlight lang="html"> | ||
<a href="#"> | <a href="#">سيتغير لون هذا الرابط عند الضغط عليه</a> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
سطر 48: | سطر 48: | ||
|1.0 | |1.0 | ||
|} | |} | ||
==مصادر ومواصفات== | ==انظر أيضًا== | ||
* صفحة الصنف الزائف <code>[[CSS/:link|link:]]</code> الذي يُمثِّل عنصرًا لم تتم زيارته من قبل. | |||
* صفحة الصنف الزائف <code>[[CSS/:visited|visited:]]</code> الذي يُمثِّل عنصرًا تمت زيارته من قبل. | |||
* صفحة الصنف الزائف <code>[[CSS/:hover|hover:]]</code> الذي يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر. | |||
== مصادر ومواصفات == | |||
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-active HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-active HTML Living Standard]. | ||
*مسودة [https://drafts.csswg.org/selectors-4/#active-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#active-pseudo Selectors Level 4]. | ||
سطر 54: | سطر 59: | ||
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | ||
*مواصفة [http://www.w3.org/TR/CSS1/#anchor-pseudo-classes CSS Level 1]. | *مواصفة [http://www.w3.org/TR/CSS1/#anchor-pseudo-classes CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Selectors]] | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS pseudo-class]] | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 20:52، 19 أكتوبر 2018
الصنف الزائف :active
في CSS (أي pseudo-class) يُمثِّل عناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.
من الشائع استخدام الصنف الزائف :active
على عناصر <a>
أو <button>
، لكن يمكن استخدامه على بقية العناصر أيضًا:
a:active {
color: red;
}
الأنماط المُعرَّفة للصنف الزائف :active
سيتم تجاوزها بأيّة أصناف زائفة تليها خاصة بالروابط (مثل :link
أو :hover
أو :visited
) التي لها نفس درجة التحديد. ولتطبيق الأنماط تطبيقًا صحيحًا فضع قاعدة :active
بعد جميع القواعد الخاصة بالروابط وفق الترتيب :link
ثم :visited
ثم :hover
ثم :active
.
ملاحظة: في الأجهزة التي فيها أكثر من زر للفأرة، فتقول CSS3 أنَّ الصنف الزائف :active
سيُطبَّق على الزر الرئيسي فقط.
الشكل العام لهذا المحدد:
:active
أمثلة
لاحظ ترتيب تطبيق الأصناف الزائفة على عنصر <a>
:
<a href="#">سيتغير لون هذا الرابط عند الضغط عليه</a>
شيفرة CSS:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background: yellow; }
a:active { color: lime; }
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي (العنصر <a>) | 1.0 | 1.0 | 4.0 | 5.0 | 1.0 |
توسعة الدعم إلى بقية العناصر | 1.0 | 1.0 | 8.0 | 7.0 | 1.0 |
انظر أيضًا
- صفحة الصنف الزائف
link:
الذي يُمثِّل عنصرًا لم تتم زيارته من قبل. - صفحة الصنف الزائف
visited:
الذي يُمثِّل عنصرًا تمت زيارته من قبل. - صفحة الصنف الزائف
hover:
الذي يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.
مصادر ومواصفات
- معيار HTML Living Standard.
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.