مرجع CSS فارسی

PSEUDO-CLASS

focus:

شبه کلاسی است که معمولا برای انتخاب و استایل دهی به المان های لینک (<a>) یا المان های فرم که توسط کاربر کلیک می شوند، استفاده می شود.

المان های فرم ، مانند <input> ها ، <button> ها و <textarea> ها وقتی توسط کاربر کلیک می شوند و آماده برای تایپ شدن هستند ، در وضعیت focus قرار گرفته اند.

وقتی با استفاده از تب در کیبورد ، بین المان های فرم یا لینک ها جا به جا می شویم . آن ها را در وضعیت focus قرار داده ایم.

a:focus {
    outline: 0;
    /* then add your own styles here */
}
                

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

سایر نکات

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

مثال ها

تکه کد زیر تغیراتی را برای حالت از پیش تعیین شده ی focus: که توسط خود مرورگر اعمال می شود ، انجام می دهد.

a:link {
    color: #0099cc;
}

a:visited {
    color: grey;
}

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

a:hover {
    border-bottom: 1px solid #0099cc;
}

a:active {
    background-color: #0099cc;
    color: white;
}
                

و برای المان های فرم مانند <input> و <textarea> می توان از استابل های CSS زیر استفاده کرد.

input:focus, textarea:focus {
    background-color: #FFFF66;
    border: 1px solid #F47E58;
}
                
دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید)

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

See the Pen :focus CSS examples by alishooti (@alishooti) on CodePen.0

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

first-child: در کروم ،فایرفاکس ،سافاری ،اپرا +7 ،اینترنت اکسپلورر +7 و اندروید وآی او اس ، پشتیبانی می شود.

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

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

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