کلاس پوسته :active CSS

تعریف و استفاده

CSS :active شبه کلاس‌ها برای انتخاب و تنظیم سبک‌های عناصری که کاربر در حال فعال کردن آنها هستند، استفاده می‌شوند.

:active شبه کلاس‌ها معمولاً برای <a> و <button> عناصر. هنگامی که کاربر لینک را کلیک می‌کند، لینک فعال می‌شود؛ دکمه نیز مشابه است.

توضیح:استفاده کنید :link سبک لینک‌های صفحه بازدید نشده را با استفاده از :visited سبک لینک‌های صفحه بازدید شده را با استفاده از :hover سبک لینک‌های قرارگیری ماوس را تنظیم کنید.

توجه داشته باشید:در تعریف CSS،:active باید در :hoverباید پس از (اگر وجود دارد) به کار برده شوند!

مثال

مثال 1

سبک‌های لینک‌های فعال را انتخاب و تنظیم کنید:

a:active {
  background-color: yellow;
}

آزمایش کنید

مثال 2

سبک‌های لینک‌های فعال را انتخاب و تنظیم کنید:

button:active {
  background-color: pink;
}

آزمایش کنید

مثال 3

سبک‌های لینک‌های فعال، <p> و <h1> و <a> در زمان کلیک را انتخاب و تنظیم کنید:

p:active, h1:active, a:active {
  background-color: yellow;
}

آزمایش کنید

مثال 4

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

/* لینک بازدید نشده */
a:link {
  color: green;
}
/* لینک بازدید شده */
a:visited {
  color: green;
}
/* لینک با قرارگیری ماوس */
a:hover {
  color: red;
}
/* لینک فعال */
a:active {
  color: yellow;
}

آزمایش کنید

مثال 5

تنظیم سبک‌های مختلف برای لینک‌ها:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

آزمایش کنید

نحوه نوشتن CSS

:active {
  اظلاعات css;
}

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این شبه کلاس را به طور کامل پشتیبانی می‌کند.

صفحات مرتبط

آموزش:لینک CSS

آموزش:دکمه CSS

آموزش:CSS شبه کلاس