सीएसएस चयनकर्ताओं ने धोखा दिया और विवरण

सीएसएस चयनकर्ताओं ने धोखा दिया

हाल ही में, मैं CSS चयनकर्ताओं में गोताखोरी कर रहा हूँ।

अपरिचित प्रतीकों के साथ बहुत सारे CSS चयनकर्ता हैं,>। , * + ~ [] आदि, इसलिए मैं अक्सर उलझन में था कि CSS चयनकर्ता कैसे काम करते हैं। आखिरकार, मैंने उन्हें अपने सिर में सीधा किया और उन्हें समझा कि मैं उन्हें कैसे डिजाइन करता हूं।

* वास्तव में, मैं उन्हें कागजात सहेजने और पृथ्वी को बचाने के लिए एक एकल ए 4 आकार के पृष्ठ पर व्यवस्थित करना चाहता था, लेकिन मैं नहीं कर सकता था, क्योंकि बहुत सारे चयनकर्ता हैं जिन्हें मैं जोड़ना चाहता था इसलिए मुझे एक से अधिक पृष्ठों पर जाना पड़ा । यह कवर पेजों को छोड़कर, सभी चार ए 4 पृष्ठ हैं।

इस चिपसेट को प्रिंट करके दीवार पर चिपका दें। उन्हें याद न करें, बस झाँक कर देखें। मुझे आशा है कि यह इन्फोग्राफिक आपको उचित सीएसएस चयनकर्ताओं को जल्दी से ढूंढने में मदद करता है और आपका समय बचाता है।

सीएसएस चयनकर्ताओं ने धोखा दियारेयान यू द्वारा सीएसएस चयनकर्ता खेल

CSS चयनकर्ताओं की चीटशीट डाउनलोड करने के लिए जाएं और गेम का आनंद लें

कोई चिंता नहीं। यह सब मुफ्त है।

Or CSS चयनकर्ता में गोता लगाएँ।

मैं एमडीएन परिभाषाओं के साथ साथ आपके लिए चीजों को आसान बनाने के लिए इन्फोग्राफिक को सूचीबद्ध करूंगा।

चयनकर्ता टाइप करें

CSS प्रकार चयनकर्ता नोड नाम के तत्वों से मेल खाता है। दूसरे शब्दों में, यह किसी दस्तावेज़ के भीतर दिए गए प्रकार के सभी तत्वों का चयन करता है। - एमडीएन

चयनकर्ता टाइप करें

आईडी चयनकर्ता

एक तत्व को उसकी आईडी विशेषता के मूल्य के आधार पर चुनता है। किसी दस्तावेज़ में दिए गए आईडी के साथ केवल एक तत्व होना चाहिए। - एमडीएन

आईडी चयनकर्ता

वंशज चयनकर्ता

B से मेल खाने वाला कोई भी तत्व A (यानी, बच्चे या बच्चे का बच्चा आदि) से मेल खाने वाले तत्व का वंशज है। कॉम्बिनेटर एक या एक से अधिक रिक्त स्थान है या संकेतों से अधिक दोहरी है। - एमडीएन

वंशज चयनकर्ता

वंशज और आईडी चयनकर्ताओं को मिलाएं

वंशज और आईडी चयनकर्ताओं को मिलाएं

कक्षा चयनकर्ता

CSS क्लास चयनकर्ता तत्वों को उनकी वर्ग विशेषता के आधार पर मेल खाता है। - एमडीएन

कक्षा चयनकर्ता

क्लास सेलेक्टर को मिलाएं

क्लास सेलेक्टर को मिलाएं

कॉमा संयोजक

ए और / या बी - एमडीएन से मेल खाने वाला कोई भी तत्व

कॉमा संयोजक

यूनिवर्सल चयनकर्ता

बस सब कुछ का चयन करें!

यूनिवर्सल चयनकर्ता

यूनिवर्सल चयनकर्ता को मिलाएं

यूनिवर्सल चयनकर्ता को मिलाएं

आसन्न सिबलिंग चयनकर्ता

आसन्न सिबलिंग कॉम्बीनेटर (+) दो चयनकर्ताओं को अलग करता है और केवल दूसरे तत्व से मेल खाता है यदि यह तुरंत पहले तत्व का अनुसरण करता है, और दोनों एक ही मूल तत्व के बच्चे हैं। - एमडीएन

आसन्न सिबलिंग चयनकर्ता

सामान्य सहोदर चयनकर्ता

सामान्य सिबलिंग कॉम्बिनेटर (~) दो चयनकर्ताओं को अलग करता है और केवल दूसरे तत्व से मेल खाता है यदि यह पहला तत्व (हालांकि जरूरी नहीं कि तुरंत) अनुसरण करता है, और दोनों एक ही मूल तत्व के बच्चे हैं। - एमडीएन

सामान्य सहोदर चयनकर्ता

बाल चयनकर्ता

चाइल्ड कॉम्बिनेटर (>) को दो सीएसएस चयनकर्ताओं के बीच रखा गया है। यह केवल दूसरे चयनकर्ता द्वारा मिलान किए गए उन तत्वों से मेल खाता है जो पहले से मिलान किए गए तत्वों के बच्चे हैं। - एमडीएन

बाल चयनकर्ता

पहला बाल छद्म चयनकर्ता

पहला बच्चा सीएसएस छद्म वर्ग भाई तत्वों के समूह के बीच पहले तत्व का प्रतिनिधित्व करता है। - एमडीएन

पहला बाल छद्म चयनकर्ता

केवल बाल छद्म चयनकर्ता

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

केवल बाल छद्म चयनकर्ता

अंतिम बाल छद्म चयनकर्ता

अंतिम-बच्चा सीएसएस छद्म वर्ग भाई तत्वों के समूह के बीच अंतिम तत्व का प्रतिनिधित्व करता है। - एमडीएन

अंतिम बाल छद्म चयनकर्ता

Nth बाल छद्म चयनकर्ता

: Nth-child () सीएसएस छद्म वर्ग भाई-बहनों के समूह में उनकी स्थिति के आधार पर तत्वों से मेल खाता है। - एमडीएन

Nth बाल छद्म चयनकर्ता

Nth अंतिम बाल चयनकर्ता

: Nth-last-child () CSS छद्म-वर्ग भाई-बहनों के समूह के बीच उनकी स्थिति के आधार पर तत्वों से मेल खाता है, जो अंत से गिना जाता है। - एमडीएन

Nth अंतिम बाल चयनकर्ता

पहले प्रकार का चयनकर्ता

सीएसएस-छद्म वर्ग का पहला-प्रकार सिबलिंग तत्वों के समूह के बीच अपने प्रकार का पहला तत्व दर्शाता है। - एमडीएन

पहले प्रकार का चयनकर्ता

टाइप सिलेक्टर का Nth

: भाई-बहन के एक समूह के बीच nth-of-type () CSS छद्म-वर्ग एक दिए गए प्रकार के तत्वों से मेल खाता है, जो उनकी स्थिति पर आधारित है। - एमडीएन

टाइप सिलेक्टर का Nth

सूत्र के साथ Nth-of-type चयनकर्ता

Nth-of-type चयनकर्ता
 नोट:
: N वें के- प्रकार (भी)
: N वें के- प्रकार (विषम)
: N वें के- प्रकार (2)
: N वें के- प्रकार (2n)
: N वें के- प्रकार (3n -1)
: N वें के- प्रकार (2n + 2)

केवल प्रकार चयनकर्ता

केवल: सीएसएस प्रकार छद्म वर्ग एक ऐसे तत्व का प्रतिनिधित्व करता है, जिसमें एक ही प्रकार का कोई भाई-बहन नहीं होता है। - एमडीएन

केवल प्रकार चयनकर्ता

अंतिम प्रकार का चयनकर्ता

सीएसएस-छद्म वर्ग का अंतिम प्रकार भाई-बहनों के समूह के बीच अपने प्रकार के अंतिम तत्व का प्रतिनिधित्व करता है। - एमडीएन

अंतिम प्रकार का चयनकर्ता

खाली चयनकर्ता

: खाली सीएसएस छद्म वर्ग किसी भी ऐसे तत्व का प्रतिनिधित्व करता है, जिसकी कोई संतान नहीं है। बच्चे तत्व नोड्स या पाठ (व्हॉट्सएप सहित) हो सकते हैं। टिप्पणियां, प्रसंस्करण निर्देश, और सीएसएस सामग्री को प्रभावित नहीं करता है कि क्या किसी तत्व को खाली माना जाता है। - एमडीएन

खाली चयनकर्ता

नकारात्मक छद्म वर्ग

: नहीं () CSS pseudo-class उन तत्वों का प्रतिनिधित्व करता है जो चयनकर्ताओं की सूची से मेल नहीं खाते हैं। चूंकि यह विशिष्ट वस्तुओं को चयनित होने से रोकता है, इसलिए इसे नकारात्मक छद्म वर्ग के रूप में जाना जाता है। - एमडीएन

नकारात्मक छद्म वर्ग

चयनकर्ता चुनें

विशेषता चयनकर्ता एक विशेष प्रकार के चयनकर्ता होते हैं जो उनकी विशेषताओं और विशेषता मूल्यों के आधार पर तत्वों से मेल खाते हैं। उनके जेनेरिक सिंटैक्स में वर्ग कोष्ठक ([]) होते हैं, जिसमें एक विशेषता नाम होता है, जो विशेषता के मूल्य के विरुद्ध मिलान करने के लिए एक वैकल्पिक स्थिति रखता है। गुण चयनकर्ताओं को गुण मान से मेल खाने के आधार पर चयनकर्ताओं को दो श्रेणियों में विभाजित किया जा सकता है: उपस्थिति और मूल्य विशेषता चयनकर्ता और सब्सट्रेट मान विशेषता संपादक। - एमडीएन

चयनकर्ता चुनें

गुण मान चयनकर्ता

गुण मान चयनकर्ता

चयनकर्ता के साथ शुरूआत करें

यह चयनकर्ता उन सभी तत्वों का चयन करेगा, जिनके लिए विशेषता विशेषता है, जिसके लिए मान वेल से शुरू होता है। - एमडीएन

चयनकर्ता के साथ शुरूआत करें

चयनकर्ता के साथ विशेषता समाप्त होती है

यह चयनकर्ता उन सभी तत्वों का चयन करेगा, जिनके लिए विशेषता विशेषता वेल के साथ समाप्त होती है। - एमडीएन

चयनकर्ता के साथ विशेषता समाप्त होती है

वाइल्डकार्ड चयनकर्ता को शामिल करें

यह चयनकर्ता उन सभी तत्वों का चयन करेगा, जिनके लिए विशेषता attr है, जिसमें मान में विकल्प वेल है। (ए सबस्ट्रिंग बस एक स्ट्रिंग का हिस्सा है, उदा। "कैट" स्ट्रिंग "कैटरिलर" का एक विकल्प है।) - एमडीएन

वाइल्डकार्ड चयनकर्ता को शामिल करें

, बधाई हो, आपने, पूरा कर लिया है

लेख

En कोडपैन

कोई प्रश्न या प्रतिक्रिया

मैं आपकी प्रतिक्रिया सुनना पसंद करूंगा कि कैसे मैं इसे आपके लिए बेहतर बना सकता हूं। कृपया अपनी टिप्पणी नीचे या मेरे ट्विटर के माध्यम से छोड़ दें।

For सीएसएस चयनकर्ताओं को खेल बनाने में मेरी मदद करने के लिए रेयान यू का बड़ा धन्यवाद। रियान यू <फ्रंटएंड 30 /> के लेखक हैं, जहां मैंने कई शांत फ्रंट-एंड तकनीकों को सीखा।

आज हैप्पी कोडिग्न