کلاس‌های شبه برای تعریف حالت‌های خاص عناصر استفاده می‌شوند. به عنوان مثال، می‌توانند برای استایل‌دهی عناصر در زمانی که کاربر نشانگر موس را روی آن قرار می‌دهد، یا زمانی که لینکی بازدید شده یا نشده است، یا زمانی که عنصری به فوکوس می‌رسد، به کار گرفته شوند.
سینتکس کلاس‌های شبه
سینتکس استفاده از کلاس‌های شبه به شکل زیر است:
selector:pseudo-class {
property: value;
}مثال‌های پرکاربرد
کلاس‌های شبه لینک‌ها
استایل‌دهی به لینک‌ها در حالت‌های مختلف:
/* لینک بازدید نشده */
a:link {
color: #FF0000;
}
/* لینک بازدید شده */
a:visited {
color: #00FF00;
}
/* لینک وقتی موس روی آن می‌رود */
a:hover {
color: #FF00FF;
}
/* لینک در حالت فعال (کلیک شده) */
a:active {
color: #0000FF;
}نکته: برای عملکرد صحیح، باید ترتیب تعریف کلاس‌های شبه به این شکل باشد:a:hover بعد از a:link و a:visited و a:active بعد از a:hover تعریف شود.
ترکیب کلاس‌های شبه با کلاس‌های HTML
می‌توان کلاس‌های شبه را با کلاس‌های HTML ترکیب کرد. مثلاً تغییر رنگ لینک وقتی روی آن هاور می‌شود:
a.highlight:hover {
color: #ff0000;
} استفاده از :hover برای استایل‌دهی به یک عنصر
مثالی از استفاده از کلاس شبه :hover برای یک عنصر <div>:
div:hover {
background-color: blue;
}نمایش تولتیپ ساده با استفاده از :hover
وقتی روی یک عنصر <div> هاور می‌کنید، یک عنصر <p> نمایش داده می‌شود:
<div>Hover over me to show the <p> element.</div>
<p style="display: none; background-color: yellow; padding: 20px;">This is a tooltip.</p>
<style>
div:hover p {
display: block;
}
</style>کلاس شبه :first-child
این کلاس شبه، اولین فرزند یک عنصر را هدف قرار می‌دهد.
مثال‌ها:
- انتخاب اولین عنصر
<p>که فرزند یک عنصر دیگر است:
p:first-child {
color: blue;
}- انتخاب اولین عنصر
<i>که درون تمام عناصر<p>قرار دارد:
p i:first-child {
color: blue;
}- انتخاب تمام عناصر
<i>که درون اولین فرزند<p>هستند:
p:first-child i {
color: blue;
}کلاس شبه :lang
این کلاس شبه برای تعریف استایل‌های خاص برای زبان‌های مختلف استفاده می‌شود.
مثال:
استفاده از کلاس شبه :lang برای تنظیم علامت نقل‌قول در زبان نروژی:
q:lang(no) {
quotes: "~" "~";
}<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>این کلاس‌های شبه می‌توانند استایل‌دهی‌های پویا و متنوعی را بر اساس وضعیت‌های مختلف عناصر ایجاد کنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام