यह सीएसएस के माध्यम से संभव नहीं है। यह "कैस्केड" को दिल तक ले जाता है ;-)।
हालाँकि, यदि आप अपने पेज में जावास्क्रिप्ट जोड़ने में सक्षम हैं, तो थोड़ा सा jQuery आपको अपने अंतिम लक्ष्य तक पहुंचा सकता है।
आप findअपने लक्ष्य तत्व / वर्ग / आईडी पर "लुक-फॉरवर्ड" करने के लिए jQuery का उपयोग कर सकते हैं , फिर अपने लक्ष्य का चयन करने के लिए पीछे हट सकते हैं।
तब आप अपने तत्व के लिए DOM (CSS) को फिर से लिखने के लिए jQuery का उपयोग करते हैं।
माइक ब्रैंट के इस जवाब के आधार पर , निम्नलिखित jQuery स्निपेट मदद कर सकता है।
$('p + ul').prev('p')
यह पहले उन सभी का चयन करता है <ul>जो तुरंत a का अनुसरण करते हैं <p>।
फिर यह <p>s के उस सेट से सभी पिछले s का चयन करने के लिए "backtracks" है <ul>।
प्रभावी रूप से, "पिछले भाई-बहन" को jQuery के माध्यम से चुना गया है।
अब, .cssउस तत्व के लिए अपने सीएसएस नए मूल्यों में पारित करने के लिए फ़ंक्शन का उपयोग करें ।
मेरे मामले में मैं आईडी के साथ एक डीआईवाई का चयन करने का एक तरीका ढूंढ रहा था #full-width, लेकिन केवल तभी अगर इसमें (अप्रत्यक्ष) डीवाई के वर्ग के साथ वंशज था .companies।
मेरे पास सभी HTML का नियंत्रण था .companies, लेकिन इसके ऊपर के किसी भी HTML को बदल नहीं सकता था।
और झरना केवल 1 दिशा: नीचे जाता है।
इस प्रकार मैं सभी का चयन कर सकता हूं #full-width।
या मैं चुन सकता है .companiesकि केवल एक का पालन किया #full-width।
लेकिन मैं केवल वही नहीं चुन सका #full-widthजो आगे बढ़ा .companies ।
और, फिर से, मैं जोड़ने में असमर्थ था .companies HTML में किसी भी उच्च । HTML का वह भाग बाहरी रूप से लिखा गया था, और हमारे कोड से लिपटा हुआ था।
लेकिन jQuery के साथ, मैं आवश्यक s का चयन कर सकता हूं #full-width, फिर उपयुक्त शैली असाइन करें:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
यह सभी पाता है #full-width .companies, और बस उन का चयन करता है .companies, जो सीएसएस में मानक तत्वों को लक्षित करने के लिए कैसे चयनकर्ताओं के समान हैं।
फिर यह .parents"बैकट्रैक" का उपयोग करता है और सभी माता-पिता का चयन करता है .companies,
लेकिन उन परिणामों को केवल #fill-widthतत्वों को रखने के लिए फ़िल्टर करता है, ताकि अंत में,
यह केवल एक #full-widthतत्व का चयन करता है यदि इसमें एक .companiesवर्ग अवरोही है।
अंत में, यह widthपरिणामी तत्व को एक नया CSS ( ) मान प्रदान करता है ।
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
jQuery संदर्भ डॉक्स:
$ () या jQuery () : DOM तत्व।
। खोजें : चयनित तत्व के वर्तमान सेट में प्रत्येक तत्व के वंशजों को प्राप्त करें, एक चयनकर्ता, jQuery ऑब्जेक्ट या तत्व द्वारा फ़िल्टर किया गया।
। माता-पिता : मिलान तत्वों के सेट में प्रत्येक तत्व के तुरंत पूर्ववर्ती सिबलिंग प्राप्त करें। यदि एक चयनकर्ता प्रदान किया जाता है, तो यह पिछली सिबलिंग को केवल तभी पुनर्प्राप्त करता है जब यह मेल खाता है कि चयनकर्ता (परिणामों को केवल सूचीबद्ध तत्वों / चयनकर्ताओं को शामिल करता है)।
। सीएसएस : मिलान तत्वों के सेट के लिए एक या अधिक सीएसएस गुण सेट करें।