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.


 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

9 دیدگاه برای “focus-within

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

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

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

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