CSS चयनकर्ता
CSS सेलेक्टर्स
सेलेक्टर इंजन CSS सेलेक्टर टेक्स्ट को संरचित रूप में पार्स करता है और इसे DOM ट्रीज़ के विरुद्ध मूल्यांकन करता है। यह सीधे क्वेरीज और कैस्केड के नियम मिलान दोनों को समर्थित करता है।
सेलेक्टर्स चलाना
select() एक सेलेक्टर को ट्री के विरुद्ध मूल्यांकन करता है और मैचेस लौटाता है; element_matches() एकल तत्व का परीक्षण करता है। दोनों मानक सेलेक्टर सिंटैक्स स्वीकार करते हैं — टाइप, क्लास, आईडी, एट्रिब्यूट, और प्यूडो-क्लास सेलेक्टर्स, जिसमें संयोजित और जटिल संयोजन शामिल हैं।
पार्स किए गए सेलेक्टर संरचनाएँ
parse() SelectorList का उत्पादन करता है जिसमें ComplexSelector और CompoundSelector एंट्रीज़ शामिल हैं, जो TypeSelector, ClassSelector, IDSelector, AttributeSelector (with AttributeOperator), UniversalSelector, और Combinator भागों से निर्मित हैं।
प्यूडो-क्लासेस
फ़ंक्शनल स्यूडो-क्लासेज़ को स्पष्ट रूप से मॉडल किया गया है: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, और संरचनात्मक nth-child वैरिएंट्स NthFilteredChildPseudoClass के माध्यम से NthArgument के साथ।
Specificity
specificity() एक चयनकर्ता के लिए मानक तीन-घटक ट्यूपल की गणना करता है, और max_specificity() एक सूची को घटाता है; match() पार्सिंग और मूल्यांकन को साथ जोड़ता है। ये वही मान हैं जो कास्केड उपयोग करता है, इसलिए क्वेरी परिणाम और गणना किए गए स्टाइल हमेशा मेल खाते हैं।
टिप्स और सर्वोत्तम प्रथाएँ
- फ़िल्टरों के भीतर
element_matches()का उपयोग करें, प्रत्येक तत्व परselect()को पुनः चलाने के बजाय - एक बार पार्स करें और
SelectorListको पुनः उपयोग करें जब वही चयनकर्ता कई पेड़ों के खिलाफ चलाया जाता है - जब कोई नियम अप्रत्याशित रूप से कास्केड खो देता है, तो
specificity()मानों की सीधे तुलना करें
सामान्य समस्याएँ
| समस्या | कारण | समाधान |
|---|---|---|
| चयनकर्ता कुछ नहीं मिलाता | चयनकर्ता पाठ में वाक्यविन्यास त्रुटि | parse() syntax_error के माध्यम से उठाता है — संदेश जांचें |
| समान-विशिष्टता टाईज़ “गलत” को हल करती हैं | क्रम निर्भरता | बाद के नियम टाई को जीतते हैं; नियम क्रम जांचें |
:is() बनाम :where() भ्रम | :where() शून्य विशिष्टता योगदान देता है | इच्छित कास्केड वजन के अनुसार चुनें |
FAQ
मैं एक तत्व को सेलेक्टर के विरुद्ध कैसे टेस्ट करूँ?
element_matches() — यह बूलियन लौटाता है बिना ट्री को स्कैन किए।
विशिष्टता की गणना कैसे की जाती है?
specificity() मानक (id, class, type) घटक टुपल लौटाता है; :where() समूह शून्य योगदान देते हैं।
कौन-सी स्यूडो-क्लासेस समर्थित हैं?
API में संरचित रूप: :is(), :where(), :has(), :not() जटिल आर्ग्यूमेंट्स के साथ, और nth-child-स्टाइल संरचनात्मक सेलेक्टर।
API Reference सारांश
| Class/Method | विवरण |
|---|---|
select | सेलेक्टर को ट्री के विरुद्ध मूल्यांकन करें |
element_matches | एक तत्व का परीक्षण करें |
parse | सेलेक्टर टेक्स्ट को SelectorList में पार्स करें |
specificity | विशिष्टता ट्यूपल की गणना करें |
HasPseudoClass | संरचित :has() रूप |
AttributeSelector | ऑपरेटर्स के साथ एट्रिब्यूट मैचर |
