مرجع CSS فارسی

PSEUDO-CLASS

active:

active:

active:  شبه کلاس یا کلاس انتزاعی است که زمانی که یک المان مثل یک لینک در وضعیت active قرار می گیرد کاربرد دارد.

همانطور که عنوان شد این کلاس انتزاعی یک کلاس داینمیک است که توسط کاربر فعال می شود. و برای اعمال استایل به المانی که توسط کاربر در وضعیت active قرار می گیرد کاربرد دارد. معمولا برای لینک ها <a> کاربرد پیدا می کند بین زمانی که کلیک شده تا زمانی که به لینک مربوطه ارجاع می شود. 

استایل دهی متفاوت به یک المان زمانی که در وضعیت active قرار می گیرد باعث تجربه ی بهتر کاربری می شود. بدون اعمال چنین یازخوردی از طرف المان به کاربر ، این حس به وجود خوتهد آمد که کلیک کاربر بی تاثیر بوده است. و باعث می شود کاربر احساس کند اتفاقی نیافتاده و باز شروع به کلیک کردن کند.

گرچه معمولا برای استایل دهی به لینک های کلیک شده استفاده می شود ، اما قابلیت استفاده برای سایر المان ها حتی المان ” hrml ” را نیز دارد. برای مثال تکه کد زیر پس زمینه ی خاکستری را به پاراگرافی که کلیک شده است ، می دهد.

p:active {
    background-color: #aaa;
}

در کنار استفاده از active: برای لینک ها، معمولا از link: ، :visited: و focus:  و hover: نیز استفاده می شود.

مثال

زمانی که هر 4 وضعیت از این کلاس های انتزاعی برای یک لینک استفاده می شود معمولا ترتیب زیر کاربرد دارد.

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}
a:focus {
 /* focus styles */ 
}
a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}

ترجیحا از ترتیب ذکر شده ی فوق استفاده می شود. زیرا در غیر این صورت بعضی از وضعیت ها ممکن است وضعیتی دیگر را نادیده بگیرند.

مثال

تکه کد زیر ، استایل های مختلفی را برای المان های مختلف در صفحه برای وضعیت active اعمال می کند.

a:active {
    background-color: black;
    color: white;
}

p:active {
    border: 2px dotted BlanchedAlmond;
}

body:active {
    border: 5px solid
}

دموی زیر مثال هایی از کاربرد active: در CSS می باشد.

See the Pen :active by alishooti (@alishooti) on CodePen.

ساپورت مرورگر

ساپورت هر مروگر بسته به المانی که active: روی آن اعمال می شود متفاوت است.

active: برای لینک ها در تمام مرورگرها ساپورت می شود.

استفاده از active: برای هر المانی در صفحه در مرورگرهای کروم، فایرفاکس ، سافاری ، اپرا ، اینترنت اکسپلورر +8 و اندروید ساپورت می شود.

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.

(Visited 33 times, 1 visits today)

Submit a Comment