انتخابگر focus-within زمانی فعال می می شود که یک عنصر خودش، یا فرزندان و همچنین نوادگانش در حالت focus قرار گیرند.
فرض کنید عنصر input
ی بصورت زیر داریم و همچنین میخواهیم جهت حالت focus آن هم استایل ویژه ای بنویسیم، مثلا پس باره آن هم را زرد رنگ کنیم، می توانیم با یکی از روش های زیر آن کار را انجام دهیم:
input:focus
background-color: yellow;
/* یا */
input:focus-within
background-color: yellow;
پس نتیجه آن می شود که به آن صورت خواهد بود:
حال فرض کنید بخواهیم زمانی که عنصر 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
نیز پس باره اش تغییر می کند:
نقطه ای که بایستی و حتما توجه کنیم آن می باشد که آن انتخابگر تنها و فقط محدود به پدر عنصر نیست بلکه تا بالاترین اجداد نیز شاملش خواهد شد، به عنوان مثال در دموی زیر ما جهت عنصر body
هم در حالت focus
عنصر input
، استایلی متغایر و متفاوت در نظر گرفتیم:
See the Pen focus-within by Mojtaba Seyedi (@seyedi) on CodePen.