सामान्य सहोदर - सीएसएस-ट्रिक्स

CSS में सामान्य सिबलिंग कॉम्बिनेटर (~) इस तरह दिखता है:

.featured-image ~ p ( font-size: 90%; )

उस उदाहरण में, आप एक लेख में सभी पैराग्राफों का चयन करेंगे जो कि चित्रित छवि ("चित्रित छवि का एक वर्ग नाम के साथ एक तत्व") के बाद आते हैं और उन्हें थोड़ा छोटा करते हैं font-size।

यह समान पदानुक्रम स्तर पर तत्वों का चयन करता है। इस उदाहरण में .featured-imageऔर pतत्व समान पदानुक्रम पर हैं। यदि चयनकर्ता पिछले pया उससे पहले जारी रहा .featured-image, तो सामान्य नियम लागू होते हैं। इसलिए .featured-image ~ p spanअभी भी ऐसे स्पैन का चयन करेंगे जो किसी भी .featured-image ~ pमैच के वंशज हैं ।

चयनकर्ताओं स्तर 4 के लिए कल्पना इन "सिबलिंग कॉम्बिनेटरों का अनुसरण" करती है।

डेमो

यहां एक और उदाहरण दिया गया है, जो सभी pतत्वों का अनुसरण करता है img:

img ~ p ( background-color: #FEF0B6; padding: 5px; )

जिसके परिणामस्वरूप निम्नलिखित होंगे:

क्वर्क्स

WebKit में एक quirk होता था जहाँ आप इन्हें छद्म चयनकर्ताओं के साथ उपयोग नहीं कर सकते थे। पसंद:

input:checked ~ div ( /* Wouldn't work */ )

मुझे उन ब्राउज़र के सटीक संस्करण नहीं पता हैं, जहां यह तय किया गया था, लेकिन अब यह तय हो गया है।

अधिक जानकारी

• बाल और सिबलिंग चयनकर्ता
• आसन्न सिबलिंग संयोजक के समान।
• एमडीएन डॉक्स

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

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