: माचिस () - सीएसएस-ट्रिक्स

:matchesछद्म वर्ग आधिकारिक सीएसएस चयनकर्ता स्तर 4 विनिर्देशों द्वारा एक कार्यात्मक छद्म वर्ग के रूप में वर्णन किया गया है। यह अपने आप में किसी भी उद्देश्य का चयन नहीं करता है सिवाय इसके कि कुछ जटिल चयनकर्ताओं को उन्हें समूहीकृत करने के लिए हल्का बनाया जाए। एक तरह से, हम :matchesसिंटैक्टिक शुगर के रूप में सोच सकते हैं ।

मूल रूप से यह आपको एक यौगिक चयनकर्ता को दोहराने से दूर रखता है जब केवल एक आइटम होता है जो भिन्न होता है। मेरा मानना ​​है कि यह न केवल लिखने के लिए तेज़ है, बल्कि ब्राउज़र के लिए पार्स करने के लिए भी तेज़ है लेकिन मुझे इस बारे में कोई ठोस जानकारी नहीं है क्योंकि मुझे पता है कि यह छद्म वर्ग चयनकर्ताओं को लिखने में मदद करने के अलावा और कुछ नहीं करता है।

वाक्य - विन्यास

:matches( selector(, selector)* )

:matches()मान्य चयनकर्ताओं की एक सूची को तर्क के रूप में स्वीकार करता है। पसंद:

:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )

यह कुछ जटिल चयनकर्ताओं को लिखना आसान बनाता है, उदाहरण के लिए:

:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )

और कम दोहराव:

.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )

ध्यान दें कि :matches()नेस्टेड नहीं किया जा सकता है और साथ काम नहीं करता है :not()। निम्नलिखित चयनकर्ताओं में से कोई भी काम नहीं करेगा:

/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))

बेवकूफ चेतावनी

संयोजन स्टेटर्स जो कॉम्बीनेटर (जैसे ~, >…) को फास्ट प्रोफाइल में उत्तीर्ण चयनकर्ता की अनुमति नहीं है, लेकिन जटिल प्रोफ़ाइल में होगा। इसे सरल बनाने के लिए, तेज प्रोफ़ाइल विशिष्टताओं का पहला (और संभव अंतिम) कार्यान्वयन होगा, जबकि जटिल प्रोफ़ाइल एक काल्पनिक परिपूर्ण भविष्य से संबंधित है जहां प्रदर्शन ज्यादा मायने नहीं रखता है।

जून 2015 को अपडेट करें : निश्चित नहीं कि उपरोक्त पैराग्राफ अब कितना सही है। हम जिस युक्ति से जुड़े हैं वह बदल गई है और वह हिस्सा चला गया है। तो हमने लिंक हटा दिया।

सास के साथ व्यवहार की नकल करना

सास (या उस मामले के लिए किसी भी सीएसएस प्रीप्रोसेसर) के साथ समान व्यवहार का अनुकरण करना संभव है:

// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )

यह :matches()चयनकर्ता घोंसले के शिकार के बराबर चयनकर्ता बनाता है । आप इसे उच्च स्तर पर स्वचालित करने के लिए कुछ प्रकार के फ़ंक्शन भी बना सकते हैं, लेकिन यह यहाँ के दायरे से बाहर है।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
88	78	नहीं न	88	१४

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	14.0-14.4

नोट: चूंकि सीएसएस संपूर्ण चयनकर्ता को अस्वीकार कर देता है जब कोई ऐसा हिस्सा होता है जो उसे समझ में नहीं आता है, तो आपको इसे हर जगह काम करने के लिए अलग करना होगा। उदाहरण के लिए, यदि आप अभी भी हैं

/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )