:focus-withinİyi adlandırılmış ve oldukça sezgisel rağmen CSS'deki sözde seçici, biraz sıradışı. Bu öğe sahip olan herhangi bir alt öğe içeriyorsa, bir öğe seçer :focus.
form:focus-within ( background: lightyellow; )Bunun gibi çalışan ...
"Olağandışı" dedim çünkü CSS'de alt öğelerin varlığına veya durumuna göre bir üst öğe seçebilmek yaygın değildir. Tabii ki yararlıdır!
İşte denemek için örnek bir form:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Simple Responsive Form'a bakın.
Örneğin :focus-within, tüm formda ve iç girdi sarmalamada kullanıldığını unutmayın.
Bir alt öğenin odaklanabileceği herhangi bir yol tetikleyecektir: odaklanma. Örneğin, bir öğenin bir tab-indexveya contenteditableözniteliği varsa, odaklanabilir bir öğedir ve çalışacaktır. Öğenin nasıl odaklandığı da önemli değil. Tıklanabilir veya dokunulabilir, sekme haline getirilebilir veya başka bir yolla gezilebilir veya hatta JavaScript aracılığıyla odaklanabilir, örneğin ...
document.querySelector("input").focus();Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 60 | 52 | Hayır | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |