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

Anonim

:only-of-typeसीएसएस में छद्म वर्ग चयनकर्ता किसी भी तत्व को दी प्रकार का कोई भाई बहन है कि प्रतिनिधित्व करता है।

p:only-of-type ( color: red; )

यदि कोई टैग चयनकर्ता से पहले नहीं आता है, तो यह किसी भी टैग (जैसे :only-of-type) से मेल खाएगा । यदि कोई अन्य चयनकर्ता इसे पसंद करता है, तो यह उस प्रकार के टैग के आधार पर मिलान करेगा जो चयनकर्ता मेल खाता है। उदाहरण के लिए .example:only-of-typeव्यवहार करेंगे जैसे p:only-of-typeकि .exampleएक पैरा तत्व पर लागू किया जाता है।

सरल उदाहरण

एक सूची में केवल एक सूची आइटम शामिल है। एक अन्य सूची में तीन सूची आइटम शामिल हैं। हम उस सूची आइटम को लक्षित कर सकते हैं जो अकेले है :only-of-type

इस पेन को देखें!

हालांकि शायद यह सबसे अच्छा उदाहरण नहीं है, क्योंकि :only-childसूची के केवल संभावित बच्चे हैं, क्योंकि सूची आइटम के साथ ही काम करेगा। यदि हम इसके बजाय divs का उपयोग करते हैं, तो हम div के अंदर एक पैराग्राफ को लक्षित कर सकते हैं यदि यह एकमात्र पैराग्राफ है, अन्य तत्वों के होने के बावजूद भी।

इस पेन को देखें!

लिखने के लिए

एक तरफ मज़ा के रूप में, आप के :only-of-typeसाथ :first-of-type:last-of-typeया के रूप में एक ही चयन प्राप्त कर सकते हैं :nth-of-type(1):nth-last-of-type(1)। हालांकि वे दो जंजीरों का चयन करते हैं, जिसका अर्थ है कि विशिष्टता दोगुनी है :only-of-type

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

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
कोई कोई कोई कोई IE9 + कोई कोई