مقدمه
برای مدتهای طولانی انتخاب عنصر والد (Parent) تنها با استفاده از CSS تقریباً غیرممکن بود. اما با معرفی شبهکلاس :focus-within این محدودیت تا حد زیادی برطرف شده است.
این شبهکلاس به شما اجازه میدهد زمانی که خود یک عنصر فوکوس دارد یا هر یک از عناصر داخلی آن (فرزندانش) فوکوس گرفتهاند، آن عنصر را استایلدهی کنید.
یکی از رایجترین کاربردهای :focus-within در فرمها است؛ جایی که میخواهید وقتی کاربر روی یکی از فیلدهای فرم کلیک میکند، کل فرم ظاهر متفاوتی پیدا کند.
مثال عملی
فرض کنید HTML زیر را داریم:
<form tabindex="0" class="myForm">
<h3>رنگ مورد علاقه شما چیست؟</h3>
<input type="text">
</form>
حالا استایلهای زیر را اعمال میکنیم:
.myForm:focus-within {
background: #f8f8f8
repeating-linear-gradient(
45deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.5) 35px,
rgba(255, 255, 255, 0.5) 70px
);
}
.myForm:focus-within::before {
content: "فرم انتخاب شده است!";
color: rgb(239, 187, 53);
}
:focus-within چگونه کار میکند؟
زمانی که کاربر:
- روی خود فرم فوکوس کند.
- یا روی یکی از فیلدهای داخل فرم کلیک کند.
استایل تعریفشده در :focus-within روی عنصر والد (فرم) اعمال میشود.
به عبارت دیگر، اگر یکی از عناصر داخلی فوکوس داشته باشد، والد نیز در وضعیت focus-within قرار میگیرد.
تفاوت :focus و :focus-within
بسیاری از توسعهدهندگان این دو را با هم اشتباه میگیرند.
استفاده از :focus
.myForm:focus {
background: #f8f8f8;
}
در این حالت فقط زمانی استایل اعمال میشود که خود فرم فوکوس داشته باشد.
استفاده از :focus-within
.myForm:focus-within {
background: #f8f8f8;
}
در این حالت علاوه بر خود فرم، اگر هر کدام از فیلدهای داخلی نیز فوکوس داشته باشند، استایل روی فرم اعمال خواهد شد.
به همین دلیل :focus-within برای طراحی فرمهای تعاملی بسیار کاربردیتر است.
کاربردهای رایج :focus-within
برجسته کردن فرم فعال
وقتی کاربر در حال تکمیل یک فرم است، میتوانید کل فرم را هایلایت کنید:
form:focus-within {
border-color: #3b82f6;
}
نمایش پیام راهنما
.form-group:focus-within .help-text {
display: block;
}
در این حالت هنگام فوکوس روی فیلدها، متن راهنما نمایش داده میشود.
تغییر ظاهر کارتها و بخشها
.card:focus-within {
box-shadow: 0 0 15px rgba(0,0,0,.15);
}
اگر داخل کارت یک فیلد ورودی وجود داشته باشد، هنگام فوکوس ظاهر کارت تغییر میکند.
نکته مهم
برای اینکه :focus-within به درستی کار کند، عناصر داخلی باید قابلیت دریافت فوکوس داشته باشند.
عناصر زیر به صورت پیشفرض فوکوسپذیر هستند:
- input
- textarea
- select
- button
- a
اما عناصری مانند:
- div
- p
- img
بهصورت پیشفرض فوکوس نمیگیرند.
اگر بخواهید این عناصر نیز فوکوسپذیر شوند، میتوانید از ویژگی tabindex استفاده کنید:
<div tabindex="0">
محتوای من
</div>
سازگاری با مرورگرها
خبر خوب این است که امروزه تقریباً تمام مرورگرهای مدرن از :focus-within پشتیبانی میکنند.
از جمله:
- Google Chrome
- Firefox
- Edge
- Safari
- Opera
بنابراین میتوانید با خیال راحت از آن در پروژههای جدید استفاده کنید.
جمعبندی
شبهکلاس :focus-within یکی از قابلیتهای کاربردی CSS مدرن است که امکان استایلدهی عنصر والد را هنگام فوکوس روی خودش یا عناصر داخلیاش فراهم میکند.
این قابلیت بهویژه برای:
- فرمها
- کارتهای تعاملی
- منوها
- پنلهای تنظیمات
بسیار مفید است و بدون نیاز به جاوااسکریپت میتواند تجربه کاربری بهتری ایجاد کند.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران