شبه‌کلاسِ :focus-within در CSS

در این مطلب درباره‌ی یکی از شبه‌کلاس‌های CSS به نام focus-within صحبت خواهیم کرد. این شبه‌کلاس زمانی فعال می‌شود که خودِ یک اِلِمان یا یکی از نوادگان آن در وضعیت focus قرار بگیرند.

در مثال زیر به‌جای استفاده از focus با بهره‌گیری از شبه‌کلاس focus-within تغییر وضعیت input را نشان می‌دهیم. همان‌طور که مشاهده می‌کنید با قرار گرفتن خود المان در وضعیت focus شبه‌کلاس focus-within فعال می‌شود.

در مثال زیر می‌خواهیم هروقت input در وضعیت focus قرار گرفت علاوه بر تغییر استایل input کل فرم در مرکز توجه واقع شود. برای این کار می‌توانیم به‌جای روش‌های مبتنی بر JavaScript از شبه‌کلاس focus-within استفاده کنیم.

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

نکته‌ی مهمی که باید مورد توجه قرار گیرد این است که این شبه‌کلاس در نسخه‌های اخیر مرورگرهای پرکاربرد موجود پشتیبانی می‌شود. در صورتی که قصد استفاده از آن را دارید باید از نحوه‌ی عمل‌کرد وب‌سایت خود در نسخه‌های قدیمی‌تر اطمینان حاصل کرده و در صورت نیاز از روش‌های جایگزین استفاده کنید.

منابع بیشتر

https://css-tricks.com/almanac/selectors/f/focus-within/

http://www.scottohara.me/blog/2017/05/14/focus-within.html