दिलचस्प पोस्ट
Java.util.Date को "java.time" टाइप करने के लिए कन्वर्ट करें? उद्देश्य-सी के अंदर स्विफ्ट क्लास का उपयोग नहीं किया जा सकता यूनिकोड, यूटीएफ, एएससीआईआई, एएनएसआई प्रारूप मतभेद विशिष्ट URL में डेटा को कैसे सी # में WebClient का उपयोग करें एक <चयन करें> jQuery का उपयोग करने के लिए विकल्प जोड़ना? एंड्रॉइड में इनबॉक्स को एसएमएस कैसे सहेजना है? डेटाबेस में या एक सिस्टम फ़ाइल में छवि स्टोर करें? वैरिएबल की गतिशील संख्या वाले फॉर्मूला जावास्क्रिप्ट सेकंड से प्रारूप के साथ समय स्ट्रिंग hh: mm: ss Express.js पर HTTPS को सक्षम करना घड़ी की दिशा में क्रमित बिंदुओं को क्रमबद्ध करें? पॉलीमॉर्फिज़्म में सी ++ JSF सेवा स्तर वेक्टर विकास के बारे में एक div में तत्वों की कार्यक्षेत्र संरेखण

क्या कोई सीएसएस अभिभावक चयनकर्ता है?

मैं <li> तत्व का चयन कैसे करूँ जो कि एंकर तत्व का प्रत्यक्ष अभिभावक है?

उदाहरण के तौर पर मेरी सीएसएस कुछ ऐसा होगी:

 li < a.active { property: value; } 

जाहिर है जावास्क्रिप्ट के साथ ऐसा करने के तरीके हैं, लेकिन मैं उम्मीद कर रहा हूं कि सीएसएस स्तर 2 के मूल स्वरूप में मौजूद कुछ प्रकार के समाधान हैं

जो मेनू मैं शैली की कोशिश कर रहा हूं वह सीएमएस से निकल रहा है इसलिए मैं सक्रिय तत्व को <li> तत्व में नहीं स्थानांतरित कर सकता हूं … (जब तक कि मैं मेनू निर्माण मॉड्यूल को थीम नहीं करता जो मैं नहीं चाहता था)।

कोई विचार?

वेब के समाधान से एकत्रित समाधान "क्या कोई सीएसएस अभिभावक चयनकर्ता है?"

वर्तमान में सीएसएस में तत्व के अभिभावक का चयन करने का कोई तरीका नहीं है।

यदि ऐसा करने का एक तरीका था, तो यह मौजूदा सीएसएस चयनकर्ताओं में से एक होगा:

  • चयनकर्ता स्तर 3 युक्ति
  • सीएसएस 2.1 चयनकर्ता स्पेक

इस दौरान, आपको जावास्क्रिप्ट का सहारा लेना होगा यदि आपको एक मूल तत्व चुनना है।


चयनकर्ता स्तर 4 वर्किंग ड्राफ्ट में शामिल हैं :has() छद्म श्रेणी जो कि jQuery के कार्यान्वयन के समान काम करता है। अप्रैल 2017 तक, यह अभी भी किसी भी ब्राउज़र द्वारा समर्थित नहीं है

का उपयोग करना :has() मूल प्रश्न इस के साथ हल किया जा सकता है:

 li:has(> a.active) { /* styles to apply to the li tag */ } 

मुझे नहीं लगता कि आप केवल सीएसएस में माता-पिता का चयन कर सकते हैं

लेकिन जैसा कि आप पहले से ही एक। .active क्लास .active , क्या उस क्लास को li (बजाय a ) के स्थान पर ले जाना आसान नहीं होगा? इस तरह आप दोनों li और सीएसएस के माध्यम से ही उपयोग कर सकते हैं।

आप इस स्क्रिप्ट का उपयोग कर सकते हैं

 *! > input[type=text] { background: #000; } 

यह किसी पाठ इनपुट के किसी भी माता-पिता का चयन करेगा। लेकिन प्रतीक्षा करें, अभी भी बहुत कुछ है। यदि आप चाहें, तो आप एक निर्दिष्ट माता पिता का चयन कर सकते हैं:

 .input-wrap! > input[type=text] { background: #000; } 

या सक्रिय होने पर इसे चुनें:

 .input-wrap! > input[type=text]:focus { background: #000; } 

इस HTML को देखें:

 <div class="input-wrap"> <input type="text" class="Name"/> <span class="help hide">Your name sir</span> </div> 

आप उस span.help चयन कर सकते हैं जब input सक्रिय है और इसे दिखाएं:

 .input-wrap! .help > input[type=text]:focus { display: block; } 

कई और क्षमताओं हैं; बस प्लगइन के दस्तावेज की जांच करें

बीटीडब्ल्यू, यह IE में काम करता है

जैसा कि कुछ अन्य लोगों द्वारा उल्लिखित है, सिर्फ एक सीएसएस तत्व का अभिभावक / शैली का उपयोग करने का तरीका नहीं है, लेकिन ये jQuery के साथ काम करता है:

 $("a.active").parents('li').css("property", "value"); 

सीएसएस 2 में ऐसा करने का कोई तरीका नहीं है। आप ली को कक्षा जोड़ सकते हैं और एक को संदर्भ दे सकते हैं

 li.active > a { property: value; } 

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

 body:contains-selector(a.active) { background: red; } 

तब ब्राउज़र को तब तक इंतजार करना होगा जब तक कि पृष्ठ लाल हो या नहीं, यह निर्धारित करने के लिए जब तक कि </body> यह लोड और पार्स नहीं किया जाता है।

यह लेख क्यों हमारे पास कोई अभिभावक चयनकर्ता नहीं है, इसे विस्तार से बताता है

सीएसएस चयनकर्ता " जनरल भाई कॉम्बिनेटर " शायद आपके लिए क्या चाहते हैं:

 E ~ F { property: value; } 

यह किसी भी E तत्व से मेल खाता है जो E तत्व से पहले होता है।

मैं निश्चित रूप से उदाहरणों में आया हूं जब यह आसान होगा, लेकिन दुर्भाग्य से माता पिता चयनकर्ता सीएसएस में मौजूद नहीं हैं।

क्या आप इसे हासिल करने की कोशिश कर रहे हैं, इसके बारे में और अधिक समझा सकते हैं? किसी समाधान में एक और तरीका हो सकता है, उदाहरण के लिए शैली को li , फिर इसे निष्क्रिय करें या सक्रिय करें या बाल चयनकर्ता के माध्यम से।

डिस्प्ले को block करने के लिए a स्विच करने की कोशिश करें, और फिर आप चाहते हैं कि किसी भी शैली का उपयोग करें। a तत्व li तत्व को भर देगा और आप इसे बदल सकते हैं जैसे कि आप चाहते हैं। li पैडिंग को 0 पर सेट करने के लिए मत भूलना

 li { padding: 0; overflow: hidden; } a { display: block; width: 100%; color: ..., background: ..., border-radius: ..., etc... } a.active { color: ..., background: ... } 

सीएसएस 2 में जहाँ तक मुझे पता नहीं है सीएसएस 3 में अधिक मजबूत चयनकर्ता हैं लेकिन सभी ब्राउज़रों में लगातार लागू नहीं किया गया है। यहां तक ​​कि बेहतर चयनकर्ताओं के साथ, मेरा मानना ​​है कि यह आपके द्वारा आपके उदाहरण में निर्दिष्ट किए गए वास्तव में पूरा करेगा।

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

उदाहरण के लिए:

 body! a:hover{ background: red; } 

एक लाल पृष्ठभूमि रंग सेट करेगा यदि उपयोगकर्ता किसी भी एंकर पर घुमाएगा।

लेकिन हमें ब्राउज़र के कार्यान्वयन को इंतजार करना होगा 🙁

आप अभिभावक के रूप में हाइपरलिंक का उपयोग करने का प्रयास कर सकते हैं, और फिर होवर पर आंतरिक तत्वों को बदल सकते हैं। इस कदर:

 a.active h1 {color:red;} a.active:hover h1 {color:green;} a.active h2 {color:blue;} a.active:hover h1 {color:yellow;} 

इस तरह से आप मूल तत्व तत्व के रोलओवर के आधार पर कई आंतरिक टैग में शैली बदल सकते हैं।

मुझे पता है कि ओपी एक सीएसएस समाधान की तलाश में था लेकिन यह jQuery का उपयोग करना आसान है। मेरे मामले में मुझे <ul> बच्चे में निहित <span> टैग के लिए <ul> मूल टैग ढूंढने की आवश्यकता <li> jQuery में है :has चयनकर्ता है इसलिए बच्चों के द्वारा माता-पिता की पहचान करना संभव है:

 $("ul:has(#someId)") 

उस ul तत्व का चयन करेगा जिसमें कुछ आईडी आईडी वाला बच्चा तत्व है या मूल प्रश्न का उत्तर देने के लिए, कुछ ऐसा होना चाहिए जो चाल (अनचेस्टर) करना चाहिए:

 $("li:has(.active)") 

वर्तमान में कोई अभिभावक चयनकर्ता नहीं है और यह डब्लूओएससी की किसी भी बातचीत में भी चर्चा नहीं की जा रही है। आपको यह समझने की ज़रूरत है कि ब्राउज़र को सीएसएस का मूल्यांकन कैसे किया जाता है, वास्तव में समझने के लिए कि हमें इसकी आवश्यकता है या नहीं।

यहां बहुत सारे तकनीकी स्पष्टीकरण हैं

जोनाथन स्नुक बताता है कि सीएसएस का मूल्यांकन कैसे किया जाता है ।

अभिभावक चयनकर्ता की वार्ता पर क्रिस सीयियर

कुशल सीएसएस चयनकर्ताओं को लिखने पर फिर से हैरी रॉबर्ट्स

लेकिन निकोल सुलिवन के सकारात्मक रुझानों पर कुछ रोचक तथ्य हैं

ये लोग फ्रंट एंड डेवलपमेंट के क्षेत्र में शीर्ष स्तर हैं।

क्या किसी ने ऐसा कुछ सुझाया है? बस क्षैतिज मेनू के लिए एक विचार …

एचटीएमएल का हिस्सा

 <div class='list'> <div class='item'> <a>Link</a> </div> <div class='parent-background'></div> <!-- submenu takes this place --> </div> 

सीएसएस का हिस्सा

 /* hide parent backgrounds... */ .parent-background { display: none; } /* ... and show it when hover on children */ .item:hover + .parent-background { display: block; position: absolute; z-index: 10; top: 0; width: 100%; } 

अद्यतन डेमो और बाकी कोड

टेक्स्ट इंपुटों के साथ इसका उपयोग करने के लिए एक अन्य उदाहरण – माता-पिता का चयन करें फ़ील्ड

डब्ल्यू 3 सी ने इस तरह के एक चयनकर्ता को बाहर रखा क्योंकि उस पर एक बड़ा प्रदर्शन प्रभाव होता है जो ब्राउज़र पर होता।

तकनीकी तौर पर हालांकि यह करने का कोई सीधा तरीका नहीं है, आप या तो jquery या javascript के साथ सॉर्ट कर सकते हैं

कैसे, आप इस तरह से कुछ भी कर सकते हैं

 a.active h1 {color:blue;} a.active p {color: green;} 

jQuery

 $("a.active").parents('li').css("property", "value"); 

यदि आप इसे jQuery का उपयोग करना चाहते हैं, तो यहां jQuery के माता पिता चयनकर्ता के लिए संदर्भ है

एक प्लगइन है जो सीएसएस को कुछ गैर-मानक सुविधाओं को शामिल करने में मदद करता है जो वेबसाइटों को डिजाइन करते समय वास्तव में मदद कर सकते हैं। इसे EQCSS कहा जाता है

ईक्यूसीएसएस में शामिल चीजों में से एक एक अभिभावक चयनकर्ता है। यह IE8 और ऊपर के सभी ब्राउज़रों में काम करता है यहां प्रारूप है:

 @element 'a.active' { $parent { background: red; } } 

तो यहां हमने एक तत्व की क्वेरी को प्रत्येक a.active पर खोल दिया है, और उस क्वेरी के अंदर की शैलियों के लिए, $parent जैसी चीज समझ में आते हैं क्योंकि एक संदर्भ बिंदु है ब्राउज़र माता-पिता को ढूंढ सकता है, क्योंकि यह जावास्क्रिप्ट में पेरेंट parentNode समान है।

यहां $parent का एक डेमो और आईई 8 में काम करने वाले एक और $parent डेमो के साथ-साथ स्क्रीनशॉट भी है, अगर आपके पास आईई 8 के साथ परीक्षण करने के लिए नहीं है ।

ईक्यूसीएसएस में मेटा-चयनकर्ताओं का भी एक चयनित तत्व से पहले तत्व के लिए $this तत्व शामिल होता है, केवल $this उन तत्वों के लिए जो एक तत्व क्वेरी से मेल खाते हैं, और अधिक।

यद्यपि वर्तमान में मानक सीएसएस में कोई अभिभावक चयनकर्ता नहीं है, मैं कुल्हाड़ी (यानी संवर्धित सीएसएस चयनकर्ता सिंटैक्स / एसीएसएसएसएस ) नामक एक (व्यक्तिगत) परियोजना पर काम कर रहा हूं, जो इसके 7 नए चयनकर्ताओं के बीच में दोनों शामिल हैं:

  1. एक तत्काल अभिभावक चयनकर्ता < (जो इसके विपरीत चयन को सक्षम करता है)
  2. कोई पूर्ववर्ती चयनकर्ता ^ (जो [SPACE] के विपरीत चयन को सक्षम करता है)

कुल्हाड़ी वर्तमान में विकास के एक अपेक्षाकृत प्रारंभिक बीटा चरण में है।

यहां एक डेमो देखें:

http://rounin.co.uk/projects/axe/axe2.html

(मानक चयनकर्ताओं के साथ बायीं बायीं तरफ दो सूचियों और कुल्हाड़ी चयनकर्ताओं के साथ स्टाइल के सही पर दो सूचियों की तुलना करें)

छद्म :focus-within एक अभिभावक को चयनित होने की अनुमति मिलती है अगर कोई वंशज का ध्यान केंद्रित हो।

एक तत्व को ध्यान केंद्रित किया जा सकता है अगर इसमें tabindex विशेषता है

फ़ोकस-इन के लिए ब्राउज़र समर्थन

tabindex

उदाहरण

 .click { cursor: pointer; } .color:focus-within .change { color: red; } .color:focus-within p { outline: 0; } 
 <div class="color"> <p class="change" tabindex="0"> I will change color </p> <p class="click" tabindex="1"> Click me </p> </div> 

सीएसएस में, हम पदानुक्रम के नीचे संपत्तियों के लिए झरना लेकिन oppostite दिशा में नहीं कर सकते हैं बाल घटना पर मूल शैली को संशोधित करने के लिए, शायद jQuery का उपयोग करें

 $el.closest('.parent').css('prop','value'); 

नहीं, आप केवल सीएसएस में अभिभावक का चयन नहीं कर सकते

लेकिन जैसा कि आप पहले से ही एक। .active क्लास .active , क्या उस वर्ग को li (बजाय a ) के स्थान पर ले जाना आसान नहीं होगा? इस तरह आप दोनों li और सीएसएस के माध्यम से ही उपयोग कर सकते हैं।

SASS में एम्पर्सस के साथ संभव है:

 h3 font-size: 20px margin-bottom: 10px .some-parent-selector & font-size: 24px margin-bottom: 20px 

सीएसएस आउटपुट:

 h3 { font-size: 20px; margin-bottom: 10px; } .some-parent-selector h3 { font-size: 24px; margin-bottom: 20px; } 

संक्षेप में उत्तर नहीं है , हमारे पास सीएसएस में इस स्तर पर कोई parent selector नहीं है, लेकिन यदि आपके पास तत्वों या वर्गों को स्वैप करने के लिए कोई रास्ता नहीं है, तो दूसरा विकल्प जावास्क्रिप्ट का प्रयोग कर रहा है, ऐसा कुछ:

 var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active')); activeATag.map(function(x) { if(x.parentNode.tagName === 'LI') { x.parentNode.style.color = 'red'; //your property: value; } }); 

या एक छोटा रास्ता यदि आप अपने अनुप्रयोग में jQuery का उपयोग करते हैं:

 $('a.active').parents('li').css('color', 'red'); //your property: value; 

जिनके लिए आसान मदद के लिए माता-पिता चयनकर्ता की कमी से छुटकारा पाने की कोशिश कर रहे हैं: सबसे सरल चीज jQuery की दो पंक्तियां हैं

आइए हम उस स्थिति को समझें, जिसमें हम hinner इनपुट के सत्यापन पर आधारित <form> element की कक्षा को बदलना चाहते हैं:

HTML:

 <div class="parent-row"> <label>Form 1</label> <input type="text" name="field1" /> <input type="text" class="validation-error" name="field2" /> <input type="text" name="field3" /> </div> 

सीएसएस:

 .make-red { color:red } 

JQuery:

 if($( "input" ).hasClass( "validation-error" )) { $( ".parent-row" ).addClass( "make-red" ); } 

http://jsfiddle.net/9c3hrn9y/3/