[css] सक्रिय बच्चे के माता-पिता के लिए जटिल सीएसएस चयनकर्ता



Answers

विकिपीडिया के मुताबिक :

चयनकर्ता चढ़ने में असमर्थ हैं

सीएसएस तत्व के माता-पिता या पूर्वजों का चयन करने का कोई तरीका नहीं प्रदान करता है जो कुछ मानदंडों को पूरा करता है। एक और उन्नत चयनकर्ता योजना (जैसे XPath) अधिक परिष्कृत स्टाइलशीट सक्षम करेगी। हालांकि, सीएसएस वर्किंग ग्रुप के माता-पिता चयनकर्ताओं के प्रस्तावों को खारिज करने के प्रमुख कारण ब्राउज़र प्रदर्शन और वृद्धिशील प्रतिपादन मुद्दों से संबंधित हैं।

और भविष्य में एसओ खोज रहे किसी भी व्यक्ति के लिए, इसे पूर्वजों के चयनकर्ता के रूप में भी जाना जा सकता है।

अद्यतन करें:

चयनकर्ता स्तर 4 स्पेक आपको चुनने का चयन करता है कि चयन का कौन सा हिस्सा विषय है:

चयनकर्ता के विषय को चयनकर्ता में यौगिक चयनकर्ताओं में से एक को डॉलर चिह्न ($) तैयार करके स्पष्ट रूप से पहचाना जा सकता है। यद्यपि चयनकर्ता जो तत्व संरचना का प्रतिनिधित्व करता है वह डॉलर के संकेत के साथ या उसके बिना होता है, इस प्रकार विषय को इंगित करता है कि कौन सा यौगिक चयनकर्ता उस संरचना में विषय का प्रतिनिधित्व करता है।

उदाहरण 1:

उदाहरण के लिए, निम्नलिखित चयनकर्ता एक सूची आइटम का प्रतिनिधित्व करता है LI आदेशित सूची के अद्वितीय बच्चे OL:

OL > LI:only-child

हालांकि, निम्नलिखित एक आदेशित सूची का प्रतिनिधित्व करता है ओएल एक अनोखा बच्चा है, वह बच्चा एलआई है:

$OL > LI:only-child

इन दो चयनकर्ताओं द्वारा प्रतिनिधित्व की गई संरचनाएं समान हैं, लेकिन चयनकर्ताओं के विषय नहीं हैं।

हालांकि यह किसी भी ब्राउज़र में या jQuery में चयनकर्ता के रूप में उपलब्ध नहीं है (वर्तमान में, नवंबर 2011)।

Question

इस प्रश्न का उत्तर यहां दिया गया है:

कक्षा में किसी बच्चे तत्व के वर्ग के आधार पर अभिभावक तत्व का चयन करने का कोई तरीका है? Http://drupal.org के लिए एक अच्छा मेनू प्लगइन द्वारा HTML आउटपुट से संबंधित मेरे लिए प्रासंगिक उदाहरण। आउटपुट इस तरह प्रस्तुत करता है:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

मेरा सवाल यह है कि सूची आइटम में शैली लागू करना संभव है या नहीं, जिसमें उस पर सक्रिय वर्ग के साथ एंकर शामिल है। जाहिर है, मैं चाहता हूं कि सूची आइटम को सक्रिय के रूप में चिह्नित किया जाए, लेकिन मेरे पास उत्पादित होने वाले कोड का नियंत्रण नहीं है। मैं जावास्क्रिप्ट (JQuery स्प्रिंग्स को दिमाग में) का उपयोग करके इस तरह की चीज कर सकता था, लेकिन मैं सोच रहा था कि सीएसएस चयनकर्ताओं का उपयोग करके ऐसा करने का कोई तरीका है या नहीं।

बस स्पष्ट होने के लिए, मैं सूची आइटम में एक शैली लागू करना चाहता हूं, एंकर नहीं।




एक और विचार मेरे पास अभी हुआ कि यह एक शुद्ध सीएसएस समाधान हो सकता है। अपनी सक्रिय कक्षा को एक बिल्कुल स्थित ब्लॉक के रूप में प्रदर्शित करें और मूल शैली को कवर करने के लिए अपनी शैली सेट करें।

a.active {
   position:absolute;
   display:block;
   width:100%;
   height:100%;
   top:0em;
   left:0em;
   background-color: whatever;
   border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
    position:relative;
}    

आप में से उन लोगों के लिए जो jquery के बिना जावास्क्रिप्ट का उपयोग करना चाहते हैं ...

माता-पिता का चयन तुच्छ है। आपको कुछ प्रकार के getElementsByClass फ़ंक्शन की आवश्यकता है, जब तक कि आप कक्षा के बजाय सक्रिय आइटम को आईडी निर्दिष्ट करने के लिए अपनी ड्रोपल प्लगइन प्राप्त नहीं कर लेते। मैंने जो फ़ंक्शन प्रदान किया है, मैंने एसओ पर कुछ अन्य प्रतिभा से पकड़ लिया। यह अच्छी तरह से काम करता है, बस ध्यान रखें जब आप डिबगिंग कर रहे हैं कि फ़ंक्शन हमेशा नोड्स की एक सरणी लौटाएगा, न केवल एक नोड।

active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
       if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
   }
}
return classElements;
}



"माता-पिता" चयनकर्ता

अभी, सीएसएस में किसी तत्व के पैरेंट का चयन करने का कोई विकल्प नहीं है (यहां तक ​​कि CSS3 भी नहीं)। लेकिन सीएसएस 4 के साथ, मौजूदा डब्ल्यू 3 सी ड्राफ्ट में सबसे महत्वपूर्ण खबर माता-पिता चयनकर्ता के लिए समर्थन है।

$ul li:hover{
    background: #fff;
}

उपर्युक्त का उपयोग करते समय, सूची तत्व को घुमाने पर, संपूर्ण अनॉर्डर्ड सूची को एक सफेद पृष्ठभूमि जोड़कर हाइलाइट किया जाएगा।

आधिकारिक दस्तावेज़ीकरण: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview चयनकर्ता 4-20110929/# https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (अंतिम पंक्ति)।




मैं वास्तव में मूल पोस्टर के रूप में एक ही मुद्दे में भाग गया। केवल .parent() jQuery चयनकर्ता का उपयोग करने का एक सरल समाधान है। मेरी समस्या थी, मैं .parent() बजाय .parent का उपयोग कर रहा था। बेवकूफ गलती मुझे पता है।

घटनाओं को बांधें (इस मामले में मेरे टैब मॉडल में हैं, इसलिए मुझे मूलभूत .click बजाय उन्हें बाध्य करने की आवश्यकता है। .click

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

यहां HTML है ..

<div id="tabView1" style="display:none;">
  <!-- start: the code for tabView 1 -->
  <div id="testTab1" style="width:1080px; height:640px; position:relative;">
    <h1 class="Bold_Gray_45px">Modal Header</h1>
    <div class="tabBleed"></div>
    <ul class="tabs">
      <li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-1">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
      <li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-2">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
    </ul>
  </div>
</div>

बेशक आप उस पैटर्न को दोहरा सकते हैं..और अधिक LI के साथ




मुझे ड्रूपल के साथ भी यही समस्या थी। सीएसएस की सीमाओं को देखते हुए, यह काम करने का तरीका मेनू HTML उत्पन्न होने पर मूल तत्वों को "सक्रिय" वर्ग जोड़ना है। http://drupal.org/node/219804 पर इसकी एक अच्छी चर्चा है, जिसका अपशॉट यह है कि यह कार्यक्षमता निकमेमेनस मॉड्यूल के संस्करण 6.x-2.x में घुमा दी गई है। चूंकि यह अभी भी विकास में है, मैंने पैच को 6.x-1.3 पर http://drupal.org/node/465738 पर बैकपोर्ट किया है ताकि मैं मॉड्यूल के उत्पादन-तैयार संस्करण का उपयोग जारी रख सकूं।




Links