: फोकस-भीतर - सीएसएस-ट्रिक्स

:focus-withinहालांकि अच्छी तरह से नामित और नहीं बल्कि सहज ज्ञान युक्त सीएसएस में छद्म चयनकर्ता, थोड़ा असामान्य है। यह एक तत्व का चयन करता है यदि उस तत्व में कोई भी बच्चा होता है :focus।

form:focus-within ( background: lightyellow; )

जो इस तरह काम करता है ...

मैंने कहा "असामान्य" क्योंकि सीएसएस में यह आम नहीं है कि बाल तत्वों के अस्तित्व या स्थिति के आधार पर एक मूल तत्व का चयन करने में सक्षम हो। हालांकि उपयोगी है!

इस पर प्रयास करने के लिए यहां एक उदाहरण रूप दिया गया है:

पेन सिंपल रिस्पॉन्सिव फॉर्म को देखें: CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा ध्यान केंद्रित करें।

ध्यान दें कि उदाहरण :focus-withinपूरे फॉर्म पर और आंतरिक इनपुट-रैपिंग पर उपयोग करता है

एस

जिस किसी भी तरह से एक बाल तत्व केंद्रित हो सकता है वह ट्रिगर हो जाएगा: फोकस-भीतर। उदाहरण के लिए, यदि किसी तत्व में एक विशेषता tab-indexया contenteditableविशेषता है, तो यह एक ध्यान देने योग्य तत्व है, और काम करेगा। यह भी कोई फर्क नहीं पड़ता कि तत्व कैसे केंद्रित हो गया। इसे क्लिक या टैप किया जा सकता है, इसे कुछ अन्य माध्यमों से टैब या नेविगेट किया जा सकता है, या यहां तक ​​कि जावास्क्रिप्ट के माध्यम से ध्यान केंद्रित किया जा सकता है, जैसे…

document.querySelector("input").focus();

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
६०	५२	नहीं न	। ९	10.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.3