css - क्या कोई सीएसएस पैरेंट चयनकर्ता है?

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;
}

आप इस script उपयोग कर सकते हैं।

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

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

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

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

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

इस एचटीएमएल को देखें:

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

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

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

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

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

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

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

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

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

यहां $parent का एक डेमो और एक और $parent डेमो है जो IE8 में काम करता है , साथ ही स्क्रीनशॉट में यदि आपके पास परीक्षण करने के लिए IE8 नहीं है ।

ईक्यूसीएसएस में चयनित तत्व से पहले तत्व के लिए meta-selectors $prev भी शामिल है, $this केवल उन तत्वों के लिए $this जो तत्व क्वेरी से मेल खाते हैं, आदि।

कम से कम तक और CSS3 सहित आप इस तरह का चयन नहीं कर सकते हैं। लेकिन यह जेएस में आजकल बहुत आसानी से किया जा सकता है, आपको बस थोड़ा वेनिला जावास्क्रिप्ट जोड़ने की जरूरत है, ध्यान दें कि कोड बहुत छोटा है।

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });

            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>

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

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

<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%; }

अद्यतन डेमो और शेष कोड

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

छद्म तत्व :focus-within किसी अभिभावक को :focus-within करने पर माता :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>

जैसा कि कुछ अन्य लोगों ने बताया है, केवल सीएसएस का उपयोग करके किसी तत्व के माता-पिता को स्टाइल करने का कोई तरीका नहीं है लेकिन jQuery साथ निम्न कार्य करता है:

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

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

तकनीकी रूप से ऐसा करने का कोई सीधा तरीका नहीं है, हालांकि, आप इसे jquery या जावास्क्रिप्ट के साथ सॉर्ट कर सकते हैं।

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

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

jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

li.active > a {
    property: value;
}

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

E ~ F {
    property: value;
}

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

हाँ:: :has()

ब्राउज़र समर्थन: none

hover साथ pointer-events का उपयोग करके एक हैक यहां दिया गया है:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>