सीएसएस 3 चयनकर्ता सिफारिश दोनों के बारे में बहुत स्पष्ट है, लेकिन मैं वैसे भी अंतर दिखाने की कोशिश करेंगे।
छद्म कक्षाएं
आधिकारिक विवरण
छद्म श्रेणी की अवधारणा को उन सूचनाओं के आधार पर चयन की अनुमति के लिए पेश किया जाता है जो दस्तावेज़ के पेड़ के बाहर स्थित होती हैं या जिन्हें अन्य सरल स्रोतों का उपयोग करके व्यक्त नहीं किया जा सकता है।
एक छद्म वर्ग में हमेशा एक "बृहदान्त्र" ( :) होता है, जिसके बाद छद्म वर्ग का नाम आता है और वैकल्पिक रूप से कोष्ठक के बीच एक मान होता है।
एक चयनकर्ता में निहित सरल चयनकर्ताओं के सभी अनुक्रमों में छद्म वर्गों की अनुमति है। प्रमुख प्रकार के चयनकर्ता या सार्वभौमिक चयनकर्ता (संभवतः छोड़ा गया) के बाद, सरल चयनकर्ताओं के अनुक्रमों में कहीं भी छद्म वर्गों की अनुमति है। छद्म श्रेणी के नाम केस-असंवेदनशील हैं। कुछ छद्म वर्ग पारस्परिक रूप से अनन्य हैं, जबकि अन्य को एक ही तत्व में एक साथ लागू किया जा सकता है। छद्म वर्ग गतिशील हो सकता है, इस अर्थ में कि कोई तत्व छद्म वर्ग प्राप्त कर सकता है या खो सकता है, जबकि उपयोगकर्ता दस्तावेज़ के साथ बातचीत करता है।
स्रोत
इसका क्या मतलब है?
छद्म वर्गों की महत्वपूर्ण प्रकृति को पहले वाक्य में कहा गया है: "छद्म वर्ग अवधारणा [...] अनुमति चयन " । यह एक स्टाइलशीट के लेखक को जानकारी के आधार पर तत्वों के बीच अंतर करने में सक्षम बनाता है जो "दस्तावेज़ के पेड़ के बाहर स्थित है" , उदाहरण के लिए लिंक की वर्तमान स्थिति ( :active, :visited)। वे डोम में कहीं भी सहेजे नहीं गए हैं, और इन विकल्पों तक पहुंचने के लिए कोई डोम इंटरफ़ेस मौजूद नहीं है।
दूसरी ओर, :targetडोम हेरफेर के माध्यम से पहुँचा जा सकता है (आप window.location.hashजावास्क्रिप्ट के साथ ऑब्जेक्ट को खोजने के लिए उपयोग कर सकते हैं ), लेकिन यह "अन्य सरल चयनकर्ताओं का उपयोग करके व्यक्त नहीं किया जा सकता है" ।
तो मूल रूप से एक छद्म वर्ग चयनित तत्वों के सेट को सरल चयनकर्ताओं के अनुक्रम में किसी अन्य सरल चयनकर्ता के रूप में परिष्कृत करेगा । ध्यान दें कि सरल चयनकर्ताओं के अनुक्रम में सभी सरल चयनकर्ताओं का मूल्यांकन उसी समय किया जाएगा। छद्म श्रेणी की पूरी सूची के लिए CSS3 चयनकर्ता की सिफारिश की जाँच करें।
उदाहरण
निम्न उदाहरण सभी पंक्तियों को ग्रे ( #ccc), सभी असमान पंक्तियों को रंग देगा जो 5 सफेद और हर दूसरी पंक्ति मैजंटा द्वारा विभाजित नहीं हैं।
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
छद्म तत्वों
आधिकारिक विवरण
छद्म तत्व दस्तावेज़ के पेड़ के बारे में दस्तावेज़ भाषा द्वारा निर्दिष्ट से परे सार बनाते हैं। उदाहरण के लिए, दस्तावेज़ भाषाएं किसी तत्व के पहले अक्षर या पहली पंक्ति तक पहुंचने के लिए तंत्र की पेशकश नहीं करती हैं। छद्म तत्व लेखकों को इसे अन्यथा दुर्गम जानकारी को संदर्भित करने की अनुमति देते हैं। छद्म तत्व लेखकों को सामग्री को संदर्भित करने का एक तरीका भी प्रदान कर सकते हैं जो स्रोत दस्तावेज़ में मौजूद नहीं है (उदाहरण के लिए, ::beforeऔर ::afterछद्म तत्व उत्पन्न सामग्री तक पहुंच प्रदान करते हैं)।
एक छद्म तत्व दो कॉलोनों ( ::) से बना है, इसके बाद छद्म तत्व का नाम आता है।
::छद्म-वर्गों और छद्म तत्वों के बीच भेदभाव स्थापित करने के लिए वर्तमान दस्तावेज़ द्वारा इस अंकन को प्रस्तुत किया गया है। मौजूदा स्टाइल शीट के साथ संगतता के लिए, उपयोगकर्ता एजेंटों को सीएसएस स्तर 1 और 2 में पेश किए गए छद्म तत्वों के लिए पिछले एक-कोलन नोटेशन को भी स्वीकार करना होगा (अर्थात्: पहली पंक्ति: पहला अक्षर: पहले और बाद में)। इस विनिर्देश में पेश किए गए नए छद्म तत्वों के लिए इस संगतता की अनुमति नहीं है।
चयनकर्ता के अनुसार केवल एक छद्म तत्व दिखाई दे सकता है, और यदि मौजूद है तो चयनकर्ता के विषयों का प्रतिनिधित्व करने वाले सरल चयनकर्ताओं के अनुक्रम के बाद प्रकट होना चाहिए।
नोट: इस विनिर्देश के भविष्य के संस्करण में प्रति चयनकर्ता के लिए कई छद्म तत्व हो सकते हैं।
स्रोत
इसका क्या मतलब है?
यहाँ सबसे महत्वपूर्ण हिस्सा यह है कि "छद्म तत्व लेखकों को [..] अन्यथा दुर्गम सूचनाओं को संदर्भित करने की अनुमति देते हैं " और वे "लेखकों को स्रोत सामग्री में मौजूद सामग्री को संदर्भित करने का एक तरीका भी प्रदान कर सकते हैं (उदाहरण के लिए, ::beforeऔर ::afterछद्म तत्व उत्पन्न सामग्री तक पहुँच देते हैं) "। सबसे बड़ा अंतर यह है कि वे वास्तव में एक नया आभासी तत्व बनाते हैं जिस पर नियम और यहां तक कि छद्म श्रेणी के चयनकर्ताओं को भी लागू किया जा सकता है। वे तत्वों को फ़िल्टर नहीं करते हैं, वे मूल रूप से सामग्री ( ::first-line, ::first-letter) को फ़िल्टर करते हैं और इसे एक आभासी कंटेनर में लपेटते हैं, जिसे लेखक स्टाइल कर सकता है लेकिन वह (अच्छी तरह से, लगभग) चाहता है।
उदाहरण के लिए, ::first-lineछद्म तत्व को जावास्क्रिप्ट के साथ फिर से जोड़ा नहीं जा सकता है, क्योंकि यह वर्तमान में उपयोग किए गए फ़ॉन्ट, फोंट के आकार, तत्वों की चौड़ाई, अस्थायी तत्वों (और शायद दिन के समय) पर निर्भर करता है। खैर, यह पूरी तरह से सच नहीं है: एक अभी भी उन सभी मूल्यों की गणना कर सकता है और पहली पंक्ति को निकाल सकता है, हालांकि ऐसा करना एक बहुत ही बोझिल गतिविधि है।
मुझे लगता है कि सबसे बड़ा अंतर यह है कि "प्रति चयनकर्ता केवल एक छद्म तत्व दिखाई दे सकता है" । नोट में कहा गया है कि यह परिवर्तन के अधीन हो सकता है, लेकिन 2012 के अनुसार मुझे विश्वास नहीं है कि हम भविष्य में किसी भी अलग व्यवहार को देखते हैं ( यह अभी भी सीएसएस में है )।
उदाहरण
निम्नलिखित उदाहरण छद्म वर्ग :langऔर छद्म तत्व का उपयोग करके किसी दिए गए पृष्ठ पर प्रत्येक उद्धरण में एक भाषा-टैग जोड़ देगा ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
टी एल; डॉ
छद्म वर्ग चयनकर्ताओं के अनुक्रम में सरल चयनकर्ताओं के रूप में कार्य करते हैं और इस तरह गैर-वर्तमान विशेषताओं पर तत्वों को वर्गीकृत करते हैं, छद्म तत्व नए आभासी तत्व बनाते हैं।
संदर्भ
W3C