سِلکتور :focus در CSS یکی از اون ویژگی‌هایی هست که خیلی وقتا شاید زیاد به چشم نمیاد، اما قدرت و اهمیتش بی‌اندازست. این سِلکتور وقتی استفاده می‌شه که یک المان مثل یک فیلد ورودی در یک فرم، توسط کاربر انتخاب بشه. فکر کنید دارید فرمی رو تکمیل می‌کنید و بعد از کلیک یا استفاده از کیبورد روی یک فیلد، دور اون فیلد یه بوردر رنگی میوفته. این دقیقا کار :focus هست که معمولا برای بالابردن تجربه کاربری و بهتر کردن UI استفاده می‌شه.
حالا ممکنه بگید این کار چه اهمیتی داره؟ خب، جواب خیلی ساده‌س. وقتی یک کاربر از سایت شما استفاده می‌کنه، این حالت‌های بصری کمک می‌کنن تا کاربر بدونه کجا داره کلیک می‌کنه و بعدی انتخابش چیه. پس اگر بخوایم ساده بگیم، این سِلکتور به نوعی راهنمای کاربر شماست تا بهتر و سریع‌تر بتونه از تَسک‌های سایتمون عبور کنه.
یکی دیگه از کاربردهای مهم :focus، اما این بار در دسترسی هست. افرادی که شاید محدودیت‌های بشنوایی یا چشم‌اندازی دارن، می‌تونن با استفاده از کیبورد و این سِلکتور، راحت‌تر از صفحات وب استفاده کنن. این توجه به دسترسی می‌تونه بازه کاربرانتون رو بزرگ‌تر کنه و باعث رضایت بیشتر و جذب کاربر جدید بشه.
ولی بریم سراغ یه مثال ساده که چطور می‌تونیم به کمک :focus یه طراحی متفاوت و زیبا ایجاد کنیم. فرض کنید می‌خواهیم برای یک فیلد ورودی، وقتی فوکوس می‌شه، رنگ بوردرش عوض بشه و یه انیمیشن کوچیک اضافه کنیم.
input[type="text"] {
border: 2px solid #ccc;
padding: 10px;
transition: border-color 0.3s ease-in-out;
}
input[type="text"]:focus {
border-color: #3399ff;
}
در تکه کد بالا اول آمدیم و برای ورودی‌های متنی یک استایل ساده قرار دادیم که یه بوردر خاکستری و یه فضای داخلی داشته باشه همراه با یک ترنزیشن که باعث می‌شه وقتی رنگ بوردر عوض می‌شه، نرم و روان بشه.
input[type="text"]: این سِلکتور، المان‌های ورودی متنی رو هدف قرار می‌ده.
border: 2px solid #ccc;: بوردر خاکستری به تمامی فیلدهای متنی اضافه می‌کنه.
padding: 10px;: فاصله داخلی به فیلدها داده می‌شه تا متن ورودی داخل فیلد از لبه‌ها فاصله بگیره.
transition: border-color 0.3s ease-in-out;: این خاصیت باعث می‌شه که تغییر رنگ بوردر با انیمیشن باشه و تغییر رنگ نرم صورت بگیره.
:focus: این بخش همونطور که گفتیم برای زمانی که المان مورد نظر فوکوس می‌شه اجرا می‌شه.
border-color: #3399ff;: رنگ بوردر رو وقتی فوکوس می‌شه به آبی تغییر می‌ده.