focus-within

انتخابگر focus-within زمانی فعال می شود که یک عنصر خودش، یا فرزندان و نوادگانش در حالت focus قرار گیرند.

فرض کنید عنصر inputی بصورت زیر داریم و میخواهیم برای حالت focus آن استایل خاصی بنویسیم، مثلا پس زمینه آن را زرد رنگ کنیم، می توانیم با یکی از روش های زیر این کار را انجام دهیم:


input:focus {
  background-color: yellow;
}

/* یا */

input:focus-within {
  background-color: yellow;
}

نتیجه به این صورت خواهد بود:

 
استفاده از انتخابگر focus-within
 

حال فرض کنید بخواهیم زمانی که عنصر input در حالت focus قرار میگیرد برای عنصر form که نگهدارنده و یکی از اجداد عنصر input است نیز استایلی خاص در نظر بگیریم. تا قبل از این برای این کار نیاز داشتیم تا از جاوااسکریپت استفاده کنیم اما با استفاده از انتخابگر focus-within این کار در CSS امکان پذیر شده است.

کافی است بصورت زیر عمل کنیم:


<form>
  <input type="text" placeholder="username"/>
  <input type="password" placeholder="password"/>
  <button>login</button>      
</form>



form:focus-within {
  background-color: orange;
}

همانطور که در ادامه مشاهده می کنیم هر بار که عنصر input در حالت focus قرار گیرد عنصر form نیز پس زمینه اش تغییر می کند:

 
استفاده از انتخابگر focus-within در سی اس اس
 

نکته ای که باید توجه کنیم این است که این انتخابگر فقط محدود به پدر عنصر نیست بلکه تا بالاترین اجداد نیز شاملش خواهد شد، به عنوان مثال در دموی زیر ما برای عنصر body هم در حالت focus عنصر input، استایلی متفاوت در نظر گرفتیم:

 

See the Pen focus-within by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

مطالب مرتبط

12 دیدگاه برای “focus-within”

  1. سلام
    واقعا ممنون از سایت خوبتون
    همیشه مطالبی که می زاری توی سایت تک هستن
    یکی از بهترین سایت هایی هست که من تا الان دیدم
    پاینده باشی

    پاسخ

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

    پاسخ

  5. سلام و عرض ادب.
    خیلی خوب توضیح دادید.
    من یه سوالی داشتم که البته به موضوع این مطلب ربط پیدا نمیکنه!
    حاشیه سایتم از هر طرف حدودا ۱۰ پیکسل فاصله داره نمیدونم باید چیکار کنم که با بادی فیکس بشه.
    ممنون میشم راهنمایی کنید.

    پاسخ

  6. سلام خسته نباشید
    بنظرتون میشه یه همچین کاریو با :hover کرد؟
    مثلا وقتی رو یه عکس hover کردی بک گراند تغییر کنه؟

    پاسخ

  7. سلام ان کدهای html که نوشتید که بدون classs عمل نمی کند توی فرم html حتما باید هر عنصری class بدهیم

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *