सीएसएस चयनकर्ता "(ए या बी) और सी"?

176

यह सरल होना चाहिए, लेकिन मुझे इसके लिए खोज शब्द खोजने में परेशानी हो रही है।
मान लें कि मेरे पास यह है:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

CSS में, मैं एक चयनकर्ता कैसे बना सकता हूं जो किसी ऐसी चीज से मेल खाता हो जो "(.a या .b) और .c" से मेल खाता हो।

मुझे पता है कि मैं यह कर सकता था:

.a.c,.b.c {
  /* CSS stuff */
}

लेकिन, मुझे लगता है कि मैं इस तरह के तर्क को बहुत सारे तार्किक संयोजनों के साथ करने जा रहा हूं, क्या एक बेहतर वाक्यविन्यास है?

html css css-selectors

— जोश
स्रोत

अगर आपको Internet Explorer 6 का समर्थन करना है तो सावधान रहें, क्योंकि यह सीएसएस चयनकर्ता में केवल एक से अधिक वर्ग नामों की अनदेखी करेगा।

— fforw

24

सौभाग्य से, इस परियोजना के लिए, मैं IE6 उपयोगकर्ताओं को खुद को अपग्रेड करने के लिए कह सकता हूं।

— जोश

12

स्पष्टता के लिए मैं हमेशा कॉमा के बाद, या बहुत कम से कम एक स्थान पर एक नई पंक्ति लगाने की कोशिश करता हूं।

— एवेज़

2

नई लाइन के लिए @ANeves +1। यह मेरी राय में सबसे अच्छा मूल्यांकन है, खासकर जब स्रोत नियंत्रण का उपयोग कर।

— कर्ट

149

वहाँ एक बेहतर वाक्यविन्यास है?

सीएसएस ' orऑपरेटर ( ,) ग्रुपिंग की अनुमति नहीं देता है। यह अनिवार्य रूप से चयनकर्ताओं में सबसे कम-पूर्वता तार्किक ऑपरेटर है, इसलिए आपको इसका उपयोग करना चाहिए .a.c,.b.c।

— मैट बॉल
स्रोत

25

अभी तक नहीं है, लेकिन प्रायोगिक :matches()छद्म श्रेणी फ़ंक्शन है जो कि बस करता है:

:matches(.a .b) .c {
  /* stuff goes here */
}

आप इसके बारे में और जानकारी यहाँ और यहाँ पा सकते हैं । वर्तमान में, अधिकांश ब्राउज़र इसके प्रारंभिक संस्करण का समर्थन करते हैं :any(), जो उसी तरह से काम करता है, लेकिन इसे बदल दिया जाएगा :matches()। हमें बस हर जगह इसका उपयोग करने से पहले थोड़ा इंतजार करना होगा (मैं निश्चित रूप से)।

— Metalcoder
स्रोत

यह IE के लिए अनुचित है कि वे कुछ भी लागू नहीं करते हैं, जिसके बारे में उन्होंने कभी सोचा भी नहीं था और शुरू करने के लिए किसी भी मसौदे में नहीं थे। :-moz-any()और :-webkit-any()मोज़िला को चयनकर्ताओं 4 के लिए सुझाव देने से बहुत पहले दिखाया गया था (इसके वर्तमान अवतार तक अग्रणी :matches())।

— BoltClock

1

किसी भी विक्रेता से यह अपेक्षा करना अनुचित नहीं है कि एक मसौदे से एक विशेषता को लागू करने की परवाह किए बिना कि मसौदा कब तक उपलब्ध कराया गया है (यह इस तथ्य के लिए ध्यान में रखना है कि चयनकर्ता 4 अस्थिर है और इसके FPWD के बाद तीन साल से अधिक समय से लागू नहीं है) ।

— BoltClock

@BoltClock, वे 2001 में मौजूद चीजों के लिए एक पूरे दशक के लिए IE6 को दोष दे रहे थे। लोग सिर्फ किसी को दोष देना चाहते हैं।

— GetFree

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

— एलेक्सी श्वेलेव

क्या मुझे केवल एक ही Uncaught DOMException: Failed to execute 'querySelector' on 'Document': ':any(.a .b)' is not a valid selector.त्रुटि मिल रही है ? As

— थॉमस

12

यदि आपके पास यह है:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

और आप केवल उन तत्वों का चयन करना चाहते हैं जिनके पास .xऔर ( .aया .b) है, आप लिख सकते हैं:

.x:not(.c) { ... }

लेकिन यह तभी सुविधाजनक है जब आपके पास तीन "उप-वर्ग" हों और आप उनमें से दो का चयन करना चाहते हैं।

केवल एक उप-वर्ग का चयन करना (उदाहरण के लिए .a):.a.x

दो उप-वर्गों का चयन करना (उदाहरण के लिए .aऔर .b):.x:not(.c)

सभी तीन उप-वर्गों का चयन: .x

— Š समय विद्या
स्रोत

6

फॉर्म a or b or c or dका कोई भी तार्किक खंड एक जैसा not(not(a) and not(b) and not(c) and not(d))है 'या' वास्तव में सिर्फ एक सुविधा समारोह है। सिद्धांत रूप में इसे सभी मामलों में इसके बिना प्राप्त करना संभव होना चाहिए । ओपी के मामले में (.a or .b) and .c->:not(:not(.a):not(.b)).c

— मैक्स मर्फी

2

@MaxMurphy क्या आपने इसका परीक्षण किया है?

— 28इमे विद्या

4

आज सुबह पाँच बजे तक, हाँ! मेरे पास js हैं जो पत्तियों पर चयनकर्ताओं के साथ पहले ऑर्डर लॉजिक को थूकते हैं, जैसे कि परिणाम देते हैं :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]। सार्वजनिक रूप से इनकार करने के लिए कोड पर्याप्त साफ नहीं है, फिर भी, अन्यथा मैं इसे पोस्ट करूंगा। मैंने क्रोम, सफारी और कम अंत वाले एंड्रॉइड फोन पर परीक्षण किया।

— मैक्स मर्फी

2

@MaxMurphy आपके पास एक महान बिंदु है, लेकिन मुझे लगता है कि आपने "सुविधा फ़ंक्शन" की बजाय अत्याचारपूर्ण परिभाषा को लागू किया है। एक डिजिटल कंप्यूटर जो कुछ भी कर सकता है उसे नंद द्वार में विघटित किया जा सकता है, लेकिन मैं बाकी सॉफ्टवेयर इंजीनियरिंग को "सुविधा कार्यों का एक गुच्छा" नहीं कहूंगा। जब डिग्री को संयुक्त किया जा सकता है, तो डिग्री के अंतर जल्दी तरह के वास्तविक अंतर बन जाते हैं।

— सारा जी

1

@MaxMurphy मुझे लगा कि आप मजाक कर रहे थे। :( नकारात्मक सीएसएस छद्म वर्ग,: नहीं (एक्स), एक तर्क के रूप में एक साधारण चयनकर्ता लेने वाला एक कार्यात्मक संकेतन है। यह एक तत्व से मेल खाता है जो तर्क से प्रतिनिधित्व नहीं करता है। एक्स में एक और निषेध चयनकर्ता नहीं होना चाहिए । (से) मोज़िला डॉक्स , मेरा जोर)

— törzsmókus

5

नहीं। मानक सीएसएस आपको जिस तरह की चीज की तलाश कर रहा है वह प्रदान नहीं करता है।

हालाँकि, आप LESS और SASS में देखना चाह सकते हैं ।

ये दो परियोजनाएं हैं जिनका उद्देश्य अतिरिक्त विशेषताओं को शुरू करके डिफ़ॉल्ट सीएसएस सिंटैक्स का विस्तार करना है, जिसमें चर, नेस्टेड नियम और अन्य एन्हांसमेंट शामिल हैं।

वे आपको बहुत अधिक संरचित सीएसएस कोड लिखने की अनुमति देते हैं, और उनमें से कोई भी निश्चित रूप से आपके विशेष उपयोग के मामले को हल करेगा।

बेशक, कोई भी ब्राउज़र अपने विस्तारित सिंटैक्स का समर्थन नहीं करता है (विशेषकर चूंकि दो परियोजनाओं में प्रत्येक में अलग-अलग सिंटैक्स और विशेषताएं हैं), लेकिन वे क्या करते हैं एक "कंपाइलर" प्रदान करता है जो आपके LESS या SASS कोड को मानक CSS में परिवर्तित करता है, जो तब आप कर सकते हैं। आपकी साइट पर तैनात हैं।

— Spudley
स्रोत

उस बिंदु पर, मैं PHP प्रिंटिंग "कंटेंट-टाइप: टेक्स्ट / सीएसएस" का उपयोग कर सकता हूं

— जोश