در زبان CSS منظور از Pseudo Class، کلاس‌هایی است که از آن طریق می‌توان حالات خاصی از یک اِلِمان را تعریف کرد. در این پست، قصد داریم ببینیم که به چه شکل با استفاده از سودو کلاس‌ها می‌توان حالات مختلف لینک‌ها را هدف قرار داد.

با استفاده از کلاس‌هایی از جنس Pseudo (توجه داشته باشیم که در واژهٔ Pseudo، حرف P تلفظ نمی‌شود که به معنی «کاذب/ساختگی» است)، می‌توان کارهای مختلفی انجام داد. به طور مثال:

استایل دادن به یک اِلِمنت وقتی که نشانگر ماوس روی آن می‌رود.
استایل دادن به لینک‌های ویزیت شده و ویزیت نشده به اَشکال مختلف.
استایل دادن به اِلِمنتی که روی آن فوکوس می‌شود.

آشنایی با سینتکس Pseudo Class

نحوهٔ نوشتن کلاس‌های سودو به شکل زیر است:


selector:pseudo-class {
    property:value;
}

با در نظر گرفتن این ساختار، لینک‌ها را می‌توان به صورت زیر هدف قرار داد:


/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

همواره باید توجه داشته باشیم که a:hover باید پس از a:link و a:visited قرار گیرد تا اثربخشی لازم را داشته باشد؛ همچنین a:active هم باید پس از a:hover بیاید. حال برای آن که بتوان این ترتیب را حذف کرد، می‌توان واژگان love-hate را به خاطر سپرد که حرف اول واژهٔ love به l در link باز می‌گردد، حرف v هم به visited؛ حرف اول hate نیز به حرف h در hover و a هم active ربط پیدا می‌کند. با این تفاسیر همیشه به یاد می‌آوریم که اول می‌باید کلاس سودوی link تعریف شود، سپس visited و در نهایت هم به ترتیب کلاس‌های hover و active.

آشنایی با کلاس‌هایی از جنس Pseudo در زبان CSS