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

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

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

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

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


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.

What are Pseudo-classes?

0


بهزاد مرادی

از جمله علائقم می‌شه به نشر علم،‌ سرمایه‌گذاری روی نسل آینده، برنامه‌نویسی به خصوص زبان PHP و جامعهٔ اپن‌سورس و همچنین راه‌اندازی استارتاپ و کارآفرینی اشاره کرد و اعتقاد دارم که سکان آکادمی می‌تونه بستری باشه که از اون طریق به علائقم جامهٔ عمل بپوشونم!






از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)