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

css-selectors (22)

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

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

li < a.active {
    property: value;
}

स्पष्ट रूप से जावास्क्रिप्ट के साथ ऐसा करने के तरीके हैं लेकिन मुझे उम्मीद है कि कुछ प्रकार का वर्कअराउंड है जो सीएसएस स्तर 2 के मूल निवासी है।

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

कोई विचार?

Answers

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

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

body! a:hover{
   background: red;
}

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

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

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

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

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

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

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

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

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

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

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

jQuery

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

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

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

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

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

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

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

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

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

li.active > a {
    property: value;
}

कम से कम तक और 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>

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>

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

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

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

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

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

हाँ:: :has()

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

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

E ~ F {
    property: value;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

छद्म तत्व :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>

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

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

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

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

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

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

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

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

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

हालांकि यह सच है कि सीएसएस ASCEND नहीं कर सकता है, यह गलत है कि आप किसी अन्य तत्व के मूल तत्व को नहीं ले सकते हैं। मुझे दोहराने दो:

अपने एचटीएमएल उदाहरण कोड का उपयोग करके, आप ली निर्दिष्ट किए बिना ली को पकड़ने में सक्षम हैं

ul * a {
    property:value;
}

इस उदाहरण में, उल कुछ तत्व का अभिभावक है और वह तत्व एंकर का अभिभावक है। इस विधि का उपयोग करने का नकारात्मक पक्ष यह है कि यदि कोई एंकर होता है जिसमें किसी भी बच्चे तत्व के साथ उल होता है, तो यह निर्दिष्ट शैलियों को प्राप्त करता है।

आप बच्चे चयनकर्ता का भी उपयोग कर सकते हैं क्योंकि आपको वैसे भी मूल तत्व निर्दिष्ट करना होगा।

ul>li a {
    property:value;
}

इस उदाहरण में, एंकर एक ली के वंशज होना चाहिए जो उल का बच्चा होना चाहिए, जिसका मतलब है कि यह उल घोषणा के बाद पेड़ के भीतर होना चाहिए। यह थोड़ा और विशिष्ट होने जा रहा है और केवल एक सूची वस्तु को पकड़ लेगा जिसमें एंकर होता है और उल का बच्चा होता है।

तो, कोड द्वारा अपने प्रश्न का उत्तर देने के लिए।

ul.menu > li a.active {
    property:value;
}

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