: केवल-बच्चा - सीएसएस-ट्रिक्स

:only-childसीएसएस में छद्म वर्ग चयनकर्ता संपत्ति एक तत्व एक माता पिता के तत्व और जिसकी मूल तत्व कोई अन्य तत्व बच्चे हैं है कि प्रतिनिधित्व करता है। यह एक ही है :first-child:last-childया के रूप में एक ही होगा :nth-child(1):nth-last-child(1), लेकिन कम विशिष्टता के साथ।

div p:only-child ( color: red; )

उदाहरण के लिए, यदि हम एक पैराग्राफ को घोंसले में रखते हैं तो…

This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

अब हम केवल स्टाइल कर सकते हैं

हमारे पहले बच्चे की । बाद में और यह बच्चे कभी स्टाइल नहीं होंगे क्योंकि माता-पिता कंटेनर में एक से अधिक बच्चे (यानी पी टैग) रखते हैं।

p:only-child ( color:red; )

हम इस उदाहरण की तरह अतिरिक्त छद्म वर्गों का मिश्रण भी कर सकते हैं जो हमारे नेस्टेड डिव के भीतर पहले पैराग्राफ और एकमात्र बच्चे का चयन करता है div.contain।

Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childचयनकर्ता के रूप में काम नहीं करेगा यदि आपके मूल तत्व में समरूप टैग वाले एक से अधिक बच्चे हों। उदाहरण के लिए…

paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

इसका परिणाम यह होगा कि माता-पिता को 1 से अधिक बच्चे (3 अनाम विभाग) से रंग लाल नहीं होगा।

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

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

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४	3.5 है	९	१२	३.२

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

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