الصنف ‎:visited

من موسوعة حسوب
< CSS
مراجعة 10:55، 10 يناير 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">Have you visited this link yet?</a><br>
<a href="">You've already visited this link.</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

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