सीएसएस छद्म वर्गों के लिए निश्चित गाइड
चाहे आप नौसिखिए हों या अनुभवी सीएसएस डेवलपर, आपने शायद सुना हो छद्म कक्षाएं. सबसे प्रसिद्ध छद्म वर्ग शायद है : मंडराना, जो हमें एक तत्व को स्टाइल करने में सक्षम बनाता है जब यह होता है होवर राज्य में, यानी जब कोई पॉइंटर डिवाइस, जैसे कि माउस, को इंगित किया जाता है.
मार्जिन और ऑटो सीएसएस फ़्लोट्स पर हमारी पिछली पोस्ट की अवधारणा के बाद, हम इस पोस्ट में छद्म कक्षाओं में गहराई से देखते हैं। हम देख लेंगे छद्म वर्ग वास्तव में क्या हैं, वे कैसे काम करते हैं, हम उन्हें कैसे वर्गीकृत कर सकते हैं, और वे छद्म तत्वों से कैसे भिन्न हैं.
छद्म वर्ग क्या हैं??
एक छद्म वर्ग एक खोजशब्द है जिसे हम CSS चयनकर्ताओं में जोड़ सकते हैं एक विशेष राज्य को परिभाषित करें संबंधित HTML तत्व का। हम एक सीएसएस चयनकर्ता के लिए एक छद्म वर्ग जोड़ सकते हैं कोलोन सिंटैक्स : इस तरह: a: होवर …
एक सीएसएस वर्ग एक विशेषता है जिसे हम उन HTML तत्वों में जोड़ सकते हैं जिनके लिए हम उसी शैली के नियमों को लागू करना चाहते हैं, जैसे शीर्ष मेनू आइटम या साइडबार विजेट के शीर्षक। दूसरे शब्दों में, हम CSS कक्षाओं का उपयोग कर सकते हैं HTML तत्वों को समूह या वर्गीकृत करें यह एक तरह से या दूसरे के समान हैं.
छद्म वर्ग इस अर्थ में उनके समान हैं कि वे भी हैं उन तत्वों में शैली नियमों को जोड़ने के लिए उपयोग किया जाता है जो समान विशेषता साझा करते हैं.
लेकिन जबकि वास्तविक कक्षाएं हैं उपयोगकर्ता परिभाषित तथा स्रोत कोड में देखा जा सकता है, उदाहरण के लिए नियमित सीएसएस कक्षाओं की नौकरी को है वर्गीकृत या समूह तत्वों. डेवलपर्स जानते हैं कि उनके तत्वों को कैसे वर्गीकृत किया जाना है: वे "मेनू-आइटम", "बटन", "थंबनेल", आदि जैसे समूह बना सकते हैं, और बाद में समान तत्वों को स्टाइल कर सकते हैं। ये वर्गीकरण उन तत्वों की विशेषताओं पर आधारित हैं जो हैं डेवलपर्स द्वारा खुद दिया गया. उदाहरण के लिए, अगर कोई डेवलपर ए का उपयोग करने का निर्णय लेता है HTML तत्वों में हालांकि है उनकी अपनी सामान्य विशेषताएं हैं पृष्ठ और उपयोगकर्ता के साथ उनकी स्थिति, स्थिति, प्रकृति और सहभागिता के आधार पर। ये ऐसी विशेषताएँ हैं जो हैं नहीं आम तौर पर HTML कोड में चिह्नित किया जाता है, लेकिन हम कर सकते हैं उन्हें छद्म वर्गों के साथ लक्षित करें उदाहरण के लिए, सीएसएस में: ये ऐसी विशेषताएँ हैं जो आम तौर पर छद्म वर्गों द्वारा लक्षित होती हैं। कक्षाओं और छद्म वर्गों के बीच अंतर को बेहतर ढंग से समझने के लिए, मान लें कि हम कक्षा का उपयोग कर रहे हैं हम निम्नलिखित सीएसएस के साथ इन अंतिम बाल तत्वों को स्टाइल कर सकते हैं: लेकिन जब अंतिम तत्व बदल जाता है तो क्या होता है? खैर, हमें आगे बढ़ना होगा का यह झंझट अपडेटिंग क्लासेस को यूजर एजेंट पर छोड़ा जा सकता है, कम से कम उन विशेषताओं के लिए जो तत्वों के बीच आम हैं (और एक अंतिम तत्व होना उतना ही आम है जितना यह मिल सकता है). बीत रहा है एक पूर्व निर्धारित कई प्रकार के छद्म वर्ग हैं, उनमें से सभी हमें अपनी विशेषताओं के आधार पर तत्वों को लक्षित करने के तरीके प्रदान करते हैं जो अन्यथा पहुंच के लिए दुर्गम या पेचीदा हैं। यहाँ MDN में मानक छद्म वर्गों की एक सूची दी गई है. डायनामिक छद्म-कक्षाओं को HTML तत्वों से जोड़ा और हटाया जाता है गतिशील, राज्य के आधार पर वे संक्रमण करते हैं उपयोगकर्ता की बातचीत के जवाब में. गतिशील छद्म वर्गों के कुछ उदाहरण हैं राज्य-आधारित छद्म वर्गों को तत्वों में जोड़ा जाता है जब वे होते हैं एक विशेष स्थिर अवस्था में. इसके सबसे प्रसिद्ध उदाहरणों में से कुछ हैं: सबसे लोकप्रिय राज्य आधारित छद्म वर्ग है संरचनात्मक छद्म वर्ग आधारित तत्वों को वर्गीकृत करते हैं दस्तावेज़ संरचना में उनकी स्थिति पर. इसके सबसे आम उदाहरण हैं ऐसे विविध छद्म वर्ग भी हैं जिन्हें वर्गीकृत करना कठिन है, जैसे: छद्म वर्गों के बारे में सबसे कठिन चीजों में से एक शायद के बीच के अंतर को समझना है दोनों संरचनात्मक छद्म वर्ग हैं, और निशान मूल तत्व के अंदर एक विशिष्ट तत्व (कंटेनर), लेकिन एक अलग तरीके से. मान लीजिये n 2 है, तो आइए एक उदाहरण देखें. आइए देखें कि यह छोटा सीएसएस दो अलग-अलग मामलों में HTML को कैसे स्टाइल करता है. केस 1 में, अंदर दूसरा तत्व ए लेकिन अगर मूल तत्व कर देता है एक दूसरा पैराग्राफ है, हमारे उदाहरण में, अनुच्छेद 1, बाल 1 अनुच्छेद 2, बाल 3 दूसरे मामले में, हम अनियंत्रित सूची को तीसरे स्थान पर ले जाते हैं, और दूसरा पैराग्राफ इसके पहले आएगा। इसका मतलब है कि दोनों अनुच्छेद 1, बाल 1 अनुच्छेद 2, बाल 2 यदि आप के बीच के मतभेदों पर अधिक पढ़ना चाहते हैं जब हम छद्म वर्गों के बारे में बोलते हैं, तो समझना भी जरूरी है वे छद्म तत्वों से कैसे भिन्न हैं, उन्हें मिश्रण करने के लिए नहीं. लेकिन जब हम HTML तत्वों का चयन करने के लिए छद्म वर्गों का उपयोग करते हैं जो दस्तावेज़ ट्री में मौजूद है बस अलग से चिह्नित नहीं है, छद्म तत्व हमें उन तत्वों को लक्षित करने की अनुमति देते हैं जो आम तौर पर मौजूद नहीं है DOM में, या तो बिलकुल (उदा वहाँ भी एक है वाक्य रचना में अंतर. छद्म तत्वों की पहचान आम तौर पर दोहरे कॉलनों से की जाती है इससे CSS2 की तरह भ्रम की स्थिति पैदा हो सकती है, छद्म तत्वों को एक एकल बृहदान्त्र के साथ चिह्नित किया गया था - ब्राउज़र अभी भी छद्म तत्वों के लिए एकल बृहदान्त्र सिंटैक्स स्वीकार करते हैं. छद्म वर्गों और छद्म तत्वों के बीच अंतर भी हैं जिस तरह से हम उन्हें CSS के साथ लक्षित कर सकते हैं. छद्म तत्व केवल प्रकट हो सकते हैं बाद चयनकर्ताओं के अनुक्रम, जबकि छद्म वर्गों को सीएसएस चयनकर्ता अनुक्रम में कहीं भी रखा जा सकता है. उदाहरण के लिए, आप किसी सूची तत्व के अंतिम सूची आइटम को लक्षित कर सकते हैं जैसे या चयनकर्ता का पहला क्रम अंतिम बच्चे को अंदर चुनता है आइए छद्म तत्वों के साथ कुछ ऐसा ही करने की कोशिश करें. ऊपर सीएसएस कोड मान्य है, और "लाल" पाठ दिखाई देगा बाद दूसरी ओर, यह कोड काम नहीं करेगा, जैसा कि हम एक छद्म तत्व की स्थिति को बदल नहीं सकते चयनकर्ता अनुक्रम के अंदर. इसके अलावा, एक चयनकर्ता के पास केवल एक छद्म तत्व दिखाई दे सकता है, जबकि छद्म वर्ग एक दूसरे के साथ जोड़ा जा सकता है अगर संयोजन समझ में आता है। उदाहरण के लिए, पहले बाल तत्वों को पढ़ने के लिए जो केवल-पढ़ने के लिए भी हैं, हम छद्म कक्षाओं का एक संयोजन बना सकते हैं के साथ एक चयनकर्ता कोड यह जानना महत्वपूर्ण है य़े हैं नहीं सीएसएस छद्म कक्षाएं जिसे jQuery द्वारा लक्षित किया जा रहा है। उन्हें jQuery चयनकर्ता एक्सटेंशन कहा जाता है. jQuery चयनकर्ता एक्सटेंशन आपको देता है सरल तत्वों के साथ HTML तत्वों को लक्षित करें. उनमें से अधिकांश कई सामान्य सीएसएस चयनकर्ताओं के संयोजन हैं, जिन्हें एक ही कीवर्ड के साथ दर्शाया गया है.छद्म वर्गों का उद्देश्य
.अंतिम विभिन्न मूल कंटेनरों में अंतिम तत्वों की पहचान करना.
li.last पाठ-परिवर्तन: अपरकेस; option.last फ़ॉन्ट-शैली: इटैलिक;
.अंतिम पूर्व अंतिम तत्व से वर्तमान एक तक वर्ग.:अंतिम बच्चा छद्म वर्ग वास्तव में बहुत उपयोगी है। इस तरह, हम अंतिम तत्व को इंगित नहीं करना है HTML- कोड में, लेकिन हम अभी भी उन्हें निम्नलिखित CSS के साथ स्टाइल कर सकते हैं: ली: अंतिम बच्चे पाठ-परिवर्तन: अपरकेस; विकल्प: अंतिम बच्चे फ़ॉन्ट-शैली: इटैलिक;
मुख्य प्रकार के छद्म वर्ग
1. गतिशील छद्म कक्षाएं
: मंडराना, : फोकस, :संपर्क, तथा :का दौरा किया, जिनमें से सभी को जोड़ा जा सकता है लंगर टैग. a: दौरा किया color: # 8D20AE; .बटन: होवर, .बटन: फोकस फॉन्ट-वेट: बोल्ड;
2. राज्य आधारित छद्म वर्ग
: जाँच चेकबॉक्स के लिए आवेदन किया जा सकता है ():पूर्ण स्क्रीन किसी भी तत्व को लक्षित करने के लिए जो वर्तमान में फुल-स्क्रीन मोड में प्रदर्शित किया जा रहा है: विकलांग HTML तत्वों के लिए जो अक्षम मोड में हो सकते हैं, जैसे कि , , तथा . : जाँच, कौन से झंडे चेक बॉक्स चेक किए गए हैं या नहीं. .चेकबॉक्स: चेक + लेबल फ़ॉन्ट-शैली: इटैलिक; इनपुट: अक्षम पृष्ठभूमि-रंग: #EEEEEE;
3. संरचनात्मक छद्म वर्ग
:पहला बच्चा, :अंतिम बच्चा, तथा : N वें वाले बच्चे (एन) - सभी का उपयोग किसी विशेष बाल तत्व को उसकी स्थिति के आधार पर कंटेनर के अंदर लक्षित करने के लिए किया जा सकता है - और : जड़ जो DOM में उच्चतम स्तर के मूल तत्व को लक्षित करता है. 4. विविध छद्म वर्ग
: नहीं (एक्स) उन तत्वों का चयन करता है जो चयनकर्ता x से मेल नहीं खाते हैं: लैंग (भाषा-कोड) किसी विशिष्ट भाषा में सामग्री का चयन करने वाले तत्व: Dir (दिशात्मकता) जो किसी दिए गए दिशा-निर्देश की सामग्री के साथ तत्वों का चयन करता है (बाएं से दाएं या दाएं से बाएं). p: lang (ko) बैकग्राउंड-रंग: # FFFF00; : रूट पृष्ठभूमि-रंग: # FAEBD7;
n वें वाले बच्चे बनाम प्रकार का nth छद्म वर्ग
: N वें वाले बच्चे तथा : N वें प्रकार की- छद्म कक्षाएं.: N वें के- बच्चे (एन) एक तत्व को लक्षित करता है जो कि अपने मूल तत्व का दूसरा बच्चा, तथा : N वें के- प्रकार (एन) लक्ष्य के बीच दूसरा इसी प्रकार का तत्व का (जैसे पैराग्राफ) एक मूल तत्व के अंदर. / * एक पैराग्राफ जो अपने मूल तत्व के अंदर दूसरा बच्चा भी है * / p: nth-child (2) color: # 1E90FF; // lightblue / * एक मूल तत्व के अंदर दूसरा पैराग्राफ * / p: nth-of-type (2) font-weight;
मामला एक
n वें वाले बच्चे (2) नियम उस पर लागू नहीं होगा। हालाँकि यह एक दूसरा बच्चा है, यह है नहीं एक पैरा. n वें के- प्रकार (2) नियम लागू होगा, क्योंकि यह नियम केवल के लिए दिखता है तत्वों, और अन्य के बारे में परवाह नहीं है प्रकार मूल तत्व के अंदर तत्वों (जैसे अनियंत्रित सूचियों) के रूप में.n वें के- प्रकार (2) नियम दूसरे पैराग्राफ को स्टाइल करेगा जो चाइल्ड 3 है.
अनियोजित सूची 1, बाल 2
केस 2
: N वें वाले बच्चे (2) और यह : N वें के- प्रकार (2) नियम लागू किए जाएंगे, क्योंकि दूसरा पैराग्राफ भी अपने माता-पिता की दूसरी संतान है
अनियोजित सूची 1, बाल 3
: N वें के- बच्चे तथा : N वें प्रकार की- छद्म कक्षाएं, सीएसएस ट्रिक्स इस पर एक महान पोस्ट है। यदि आप SASS का उपयोग करते हैं, तो Family.scs आपको जटिल बनाने में मदद कर सकता है n वें वाले बच्चे'अगर तत्व.छद्म वर्ग बनाम छद्म तत्व
छद्म तत्वों, जैसे कि :: पहले तथा ::बाद (उन्हें कैसे उपयोग करने के लिए इस ट्यूटोरियल देखें) भी हैं उपयोगकर्ता एजेंटों द्वारा जोड़ा गया, तथा उन्हें सीएसएस के साथ लक्षित और स्टाइल किया जा सकता है साथ ही, छद्म वर्गों की तरह. :: पहले तथा ::बाद) या केवल मौजूदा तत्वों के कुछ हिस्सों के रूप में (उदाहरण के लिए) ::प्रथम अक्षर या :: प्लेसहोल्डर). ::, जबकि छद्म वर्गों की पहचान एक एकल बृहदान्त्र के साथ की जाती है :.1. सीएसएस चयनकर्ता अनुक्रम में उनका स्थान
ul>: last-child.red color: # B0171F;
उल> .red: अंतिम बच्चे रंग: # B0171F;
.लाल) और दूसरा वाला उन तत्वों के बीच अंतिम बच्चे का चयन करता है जिनके पास है .लाल अंदर क्लास उल> .red :: प्रदर्शन के बाद: ब्लॉक; सामग्री: 'लाल'; रंग: # B0171F;
वर्ग के साथ आइटम .लाल. उल> :: after.red प्रदर्शन: ब्लॉक; सामग्री: 'लाल'; रंग: # B0171F;
2. एक चयनकर्ता अनुक्रम में अवसरों की संख्या
:पहला बच्चा तथा :सिफ़ पढ़िये इस अनुसार: : पहला बच्चा: केवल-पढ़ने के लिए color: #EEEEEE;
jQuery चयनकर्ता एक्सटेंशन
: वाक्यविन्यास हमेशा एक उचित सीएसएस छद्म वर्ग का गठन नहीं करता है। यदि आपने कभी jQuery का उपयोग किया है, तो आपने इसके कई चयनकर्ताओं का उपयोग किया होगा : उदाहरण के लिए वाक्यविन्यास $ ( ': चेकबॉक्स'), $ ( ': इनपुट') तथा $ ( ': चयनित'). / * सभी इनपुट-संबंधित HTML तत्वों के फॉन्ट को बदलें, जैसे बटन, चयन, और इनपुट * / $ (": इनपुट") .cs ("फ़ॉन्ट-परिवार", "कूरियर नया")
