انتخابگر 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.

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