الفرق بين المراجعتين لصفحة: «CSS/:visited»

المراجعة الحالية بتاريخ 19:53، 24 أكتوبر 2018

الصنف الزائف ‎:visited في CSS (أي pseudo-class) يُمثِّل عنصرًا تمت زيارته من قبل، ولأسباب تابعة للخصوصية فإنَّ عدد الخاصيات التي يمكن تغيير قيمتها باستخدام هذا المُحدِّد قليلةٌ جدًا.

a:visited {
  color: green;
}

الأنماط المُعرَّفة للصنف الزائف ‎:visited سيتم تجاوزها بأيّة أصناف زائفة تليها خاصة بالروابط (مثل ‎:active أو ‎:hover أو ‎:link) التي لها نفس درجة التحديد. ولتطبيق الأنماط تطبيقًا صحيحًا فضع قاعدة ‎:visited بعد قاعدة ‎:link لكن قبل بقية القواعد الخاصة بالروابط وفق الترتيب ‎:link ثم ‎:visited ثم ‎:hover ثم ‎:active.

ملاحظة: استخدم المُحدِّد ‎:any-link لتحديد الروابط جميعها سواءً زارها المستخدم من قبل أم لم يزرها.

لأسبابٍ تتعلق بالخصوصية، فإنَّ عدد الخاصيات التي مكن تطبيقها على هذا الصنف محدودةٌ جدًا:

الخاصيات المسموحة هي color و background-color و border-color و border-bottom-color و border-left-color و border-right-color و border-top-color و column-rule-color و outline-color.
خاصيات SVG المسموحة هي fill و stroke.
سيتم تجاهل قناة alpha لجميع الأنماط المُطبَّقة.
صحيحٌ أنَّ الخاصيات السابقة قد تُغيّر من مظهر الألوان للمستخدم النهائي، لكن الخاصية window.getComputedStyle ستكذب دومًا وستُعيد القيمة اللونية لحالات الرابط الأخرى (الحالات ما عدا الحالة ‎:visited)

الشكل العام لهذا المحدد:

:visited

أمثلة

شيفرة HTML:

<a href="#test-visited-link">هل قمت بزيارة هذا الرابط حتى الآن؟</a><br>
<a href="">لقد قمت بالفعل بزيارة هذا الرابط</a>

شيفرة CSS:

a {
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	3.0	3.5	1.0
جعل عدد الخاصيات محدودًا	6.0	4.0	8.0	؟	5.0

انظر أيضًا

صفحة الصنف الزائف link: الذي يُمثِّل عنصرًا لم تتم زيارته من قبل.
صفحة الصنف الزائف active: الذي يُمثِّل عناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.
صفحة الصنف الزائف hover: الذي يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.

مصادر ومواصفات

معيار HTML Living Standard.
مسودة Selectors Level 4.
مواصفة Selectors Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎، جعلت هذه المواصفة عدد الخاصيات التي يمكن تطبيقها مع هذا المُحدِّد محدودًا.
مواصفة CSS Level 1.

@@ سطر 21: / سطر 21: @@
 شيفرة HTML:
 <syntaxhighlight lang="html">
-<a href="#test-visited-link">Have you visited this link yet?</a><br>
+<a href="#test-visited-link">هل قمت بزيارة هذا الرابط حتى الآن؟</a><br>
-<a href="">You've already visited this link.</a>
+<a href="">لقد قمت بالفعل بزيارة هذا الرابط</a>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 61: / سطر 61: @@
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:link|link:]]</code> الذي يُمثِّل عنصرًا لم تتم زيارته من قبل.
+* صفحة الصنف الزائف <code>[[CSS/:active|active:]]</code> الذي يُمثِّل عناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.
+* صفحة الصنف الزائف <code>[[CSS/:hover|hover:]]</code> الذي يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.
+== مصادر ومواصفات ==
 *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-visited HTML Living Standard].
 *مسودة [https://drafts.csswg.org/selectors-4/#link Selectors Level 4].
@@ سطر 67: / سطر 72: @@
 *مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes CSS Level 2 (Revision 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}}]]