visited یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصر لینکی (<a>) که قبلا بازدید شده اند استفاده می شود.
نکته این که این انتخابگر فقط عنصر لینکی (<a>) که دارای ویژگی href است را انتخاب می کند.
<!-- لینک های زیر انتخاب می شوند -->
<a href="#">Random Link</a>
<a href="#id">Internal Link</a>
<a href="http://mojtabaseyedi.com">External Link</a>
<!-- اما تگ زیر انتخاب نمی شود -->
<a>No href attribute</a>
به وسیله تکه کد زیر می توان به سه لینک اول یک استایل خاص اختصاص داد:
a:visited {
color: green;
}
زمانی که قصد استایل دهی بر روی حالت های مختلف یک لینک از قبیل link , visited , focus , hover , active را دارید باید مراقب ترتیب نوشتن آن ها در CSS باشید.
ترتیب زیر در حالت عمومی ترتیب مناسبی است اما در نهایت, این طرح است که ترتیب را مشخص می کند:
a:link {
}
a:visited {
/* زمانی استایل اعمال می شود که لینک توسط کاربر بازدید شده باشد */
}
a:focus {
}
a:hover {
}
a:active {
}
دو نکته مهم:
– به دلیل امنیت و حفظ حریم شخصی کاربران, مرورگرهای مدرن استایل های قابل اعمال بر روی لینک از طریق انتخابگر visited: را محدود کردند. خصوصیت های قابل استفاده شامل color, background-color, border-color, outline-color and, column-rule-color می باشند.
– یک ناهانجاری در رفتار background-color وجود دارد که زمانی که می خواهیم پس زمینه یک لینک را در حالت visited رنگ کنیم حتما باید آن لینک پس زمینه اش رنگ شده باشد. حتی اگر قبلا به آن استایل transparent هم داده شود کار نخواهد کرد, فقط باید یک رنگ به پس زمینه داده شده باشد.
در اینجا رنگ پس زمینه در حالت visited اعمال نمی شود:
a {
color: white;
background-color: transparent;
/* و یا */
/* اگر اصلا پس زمینه تنظیم نشود */
}
a:visited {
color: white;
background-color: black;
}
اما پس زمینه زیر اعمال خواهد شد:
a {
color: white;
background-color: #eee;
}
a:visited {
color: white;
background-color: black;
}
روی لینک های زیر کلیک کنید تا در تاریخچه مرورگرتان ثبت شده و به عنوان لینک بازدید شده علامت گذاری شوند که در نتیجه استایل مربوط به visited: بر روی آنها اعمال شود.
See the Pen :visited by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
visited: در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر و همینطور در سیستم عامل های اندروید و iOS نیز پشتیبانی می شود.
سلام من میخوام صفحه ای بنویسم که در منو هر کدام از موارد به قسمتی از صفحه لینک داده شود (سکشن) و وقتی روی سکشن ها میرویم عنوان مربوطه در منو رنگش عوض شود.