क्या कोई "ऋणात्मक" सीएसएस चयनकर्ता है?नकारात्मक सीएसएस चयनकर्ता
उदाहरण के लिए जब मैं अपने सीएसएस में निम्न पंक्ति लिखता हूं, कक्षा कक्षा नाम के साथ एक टैग के अंदर सभी इनपुट फ़ील्ड लाल पृष्ठभूमि होगी।
.classname input {background: red;}
मैं सभी इनपुट क्षेत्रों है कि एक टैग के बाहर वर्ग classname साथ कर रहे हैं कैसे चुनें?
करना होगा, आप नहीं कर सकते।
नए ब्राउज़र अब इसका समर्थन करते हैं- अधिक जानकारी के लिए Sam's answer देखें।
(सीएसएस में विकल्प के लिए अन्य उत्तर देखें।)
यदि यह जावास्क्रिप्ट/jQuery में कर स्वीकार्य है, आप कर सकते हैं:
$j(':not(.classname)>input').css({background:'red'});
सीएसएस के साथ मिलान किए गए तत्वों के अभिभावक का चयन करने का कोई तरीका नहीं है। आपको उन्हें चुनने के लिए जावास्क्रिप्ट का उपयोग करना होगा।
अपने प्रश्न से मुझे लगता है आप मार्कअप कि कम या ज्यादा इस तरह दिखता है:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
एक विकल्प एक उच्च तत्व करने के लिए एक वर्ग को जोड़ने के लिए है, कहते हैं कि <form>, और सभी शैली के लिए कोई नियम लिखने फॉर्म के इनपुट का। आईई:
.formclassname input {
/* Some properties here... */
}
या
.formclassname > input {
/* Some properties here... */
}
आप उन्हें तथ्य यह है कि वे एक विशिष्ट वर्ग के साथ एक तत्व के अंदर नहीं हैं के आधार पर चयन करना चाहते हैं, तो आप के उपयोग के बिना भाग्य से बाहर हो जावास्क्रिप्ट।
क्या आप 'ग्लोबल' पृष्ठभूमि को लाल रंग में सेट करके नहीं करेंगे, फिर कक्षाओं का उपयोग दूसरों को बदलने के लिए कर रहे हैं?
input { background: red; }
.classname input { background: white; }
है यही तो मैं के लिए एक समाधान खोजने की कोशिश है क्योंकि यह सिर्फ पृष्ठभूमि है कि बदल गया है नहीं है ... – BlaM
अवहेलना नियम input' '.classname में विकल्पों में से प्रत्येक। –
आप ".classname इनपुट {पृष्ठभूमि-रंग: सफेद! महत्वपूर्ण;}" कोशिश करें ?? – AgelessEssence
मैं मौजूदा ब्राउज़र सीएसएस समर्थन के साथ इस
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
मैं निकटतम आप प्राप्त कर सकते हैं लगता है घोषणा के साथ सीधे वंशजों को प्रभावित करना है
उदाहरण के लिए यह कोड केवल "मुख्य सामग्री" श्रेणी के साथ divs के तहत इनपुट फ़ील्ड को प्रभावित करेगा
div.maincontent > input {
// do something
}
इनपुट थोड़ा परेशान हैं क्योंकि, अधिकांश अन्य HTML तत्वों के विपरीत, सभी सीएसएस गुणों को उनके डिफ़ॉल्ट मान पर रीसेट करने का कोई तरीका नहीं है।
यदि स्टाइल गैर-महत्वपूर्ण है (यानी एक अच्छा है लेकिन कार्यक्षमता को प्रभावित नहीं करता है) मैं सभी इनपुट की सरणी पाने के लिए jQuery का उपयोग करता हूं, अपने माता-पिता की जांच करता हूं, और फिर केवल उन पर स्टाइल करता हूं उस div के बाहर। कुछ की तरह:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(वैसे, मेरे पास कोई jQuery विशेषज्ञ हूँ, इसलिए ऊपर में कुछ त्रुटियों वहाँ हो सकता है, लेकिन इस तरह के सिद्धांत कुछ में काम करना चाहिए)
मोज़िला का समर्थन करता है negation pseudo-class:
:not(.classname) input {background: red;}
यह भी देखें: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
ध्यान दें कि निषेध छद्म वर्ग Selectors Level 3 Recommendation में है और आरईसी में काम करता है फ़ायरफ़ॉक्स, क्रोम और सफारी के कम संस्करण (कम से कम)। नीचे नमूना कोड।
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
[अब समर्थित] (http://caniuse.com/#feat=css-sel3) सभी प्रमुख ब्राउज़रों के रिलीज़ संस्करणों में। ([स्वचालित परीक्षण] (http://www.css3.info/selectors-test/) उपलब्ध है यदि आप दोबारा जांचना चाहते हैं कि ': नहीं() 'समर्थित है।) –
शायद यह भी जोड़ने के लायक है कि आप उन्हें श्रृंखलाबद्ध कर सकते हैं एक साथ: 'div: नहीं (#foo): नहीं (#bar)' – Daz
FWIW मैंने http://simpl.info/cssnegativeselector पर एक साधारण नकारात्मक चयनकर्ता डेमो डाला है। –
चयनकर्ता नहीं होगा "*: नहीं (.classname) इनपुट"? –
आह, प्रश्न को गलत तरीके से पढ़ें। हां, यह चाहिए - हालांकि * वैकल्पिक है। –
आह, भी, किसी भी वंशज (बी) के बजाय प्रत्यक्ष वंशज (ए> बी) का उपयोग करने की आवश्यकता है अन्यथा सभी इनपुट मेल खाते हैं क्योंकि कक्षा (जैसे शरीर) के बिना उच्च कंटेनर होने की संभावना है। –