एक टैग के लिए चयनकर्ता सीधे दूसरे टैग के बाद

Question

यह <B>टैग द्वारा पूर्ववर्ती सभी टैग का चयन करता है <A>:

A+B {
    /* styling */
}

सभी के लिए चयनकर्ता क्या है <A>टैग सीधे पीछा द्वारा <B>टैग?

यहाँ नमूना HTML मेरे सवाल फिटिंग:

<a>some text</a>
<b>some text</b>

Comments

Pease हमें एक DOM उदाहरण देता है कि कैसे Aऔर Bसंबंधित हैं।

— गंबू 3

वे संबंधित हैं कि वे भाई बहन हैं, और बी द्वारा पीछा किया जाता है। ओ ओ उन सभी bएस का चयन करना चाहते हैं जो aएस द्वारा पीछा किया जाता है , a+bजहां आप उन सभी bएस का चयन कर सकते हैं जो सीधे पहले से हैं a।

— एंथनी

2.5 साल बाद, क्या इस उत्तर का कोई अपडेट है? मैं भी बी द्वारा पीछा लक्ष्य को देख रहा हूँ।

— च्वाय

Answer 1

आप सीएसएस में नहीं कर सकते।

संपादित करें: यदि आप उदाहरण के लिए jQuery (एक जावास्क्रिप्ट पुस्तकालय) का उपयोग करते हैं, तो आप थोड़ा और अधिक सहायक हो सकते हैं .prev()।

Comments

यह एकमात्र समाधान का उपयोग करता है जावास्क्रिप्ट का उपयोग करते हुए

— Mostafa Farghaly

धन्यवाद जीरो! उसने मेरा मुद्दा ठीक कर दिया। चूँकि मेरा "ए" बायीं ओर तैरता है और "ब" दायें तैरता है, इससे कोई फर्क नहीं पड़ता कि मैंने मार्कअप किस क्रम में रखा है।

— BobRellodes

Answer 2

क्या आप ए को शैली देने का मतलब यह मानते हैं कि इसमें बी तत्व है या सीधे अंदर? इस कदर:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

आप CSS (अभी तक) में ऐसा काम नहीं कर सकते। एरिक मेयर का कहना है कि सीएसएस मेलिंग सूची में इस तरह के चयनकर्ता पर काफी बार चर्चा की गई है, और यह उल्लेखनीय नहीं है। डेव हयात, जो मुख्य वेबकिट डेवलपर्स में से एक है, एक अच्छी व्याख्या के साथ टिप्पणी करता है कि यह क्यों नहीं किया जा सकता है।

बाहर की जाँच करें: शॉन इनमैन के ब्लॉग पोस्ट और एरिक मेयर की टिप्पणी ।
डेविड हयात का वजन भी है।

Comments

मेरा मतलब दूसरा है, मैं समझता हूं कि यह मुद्दा आपको धन्यवाद देता है :)

— मोस्टफा फारगली

Answer 3

आप केवल कॉन्सेप्ट कर सकते हैं: यह सीधे टैग द्वारा पूर्ववर्ती सभी टैग का चयन करता है।

यह तार्किक रूप से आपके अनुरोध के बराबर है।

मैं अक्सर लेबल के साथ कई चेकबॉक्स की एक पंक्ति को स्टाइल करने के लिए इसका उपयोग करता हूं

सीएसएस:

label+input {
    margin-left: 4px;
}

डोम:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

Comments

मुझे लगता है कि आपको सीएसएस में "इनपुट + लेबल" टाइप करना था ताकि लेबल पर मार्जिन-लेफ्ट लागू हो।

— CAK2

@ CAK2 - मुझे लगता है कि वह सही था। ऐसा करने label+inputसे मार्जिन दूसरे से शुरू होने वाले सभी inputतत्वों पर लागू होता है । यह उनके बीच जगह बनाने का एक रचनात्मक तरीका है लेकिन शुरुआत में या फिर पंक्ति के अंत में नहीं। इस मामले में, यह बराबर है । input:not(:first-child)

— डेविड

Answer 4

हालाँकि यह बहुत उपयोगी नहीं है, आजकल आप HTML उत्पन्न करते समय और CSS नियम लागू करके अपने तत्वों के क्रम को उलट कर इस व्यवहार को प्राप्त कर सकते हैं: display: flexऔरflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

इसके अलावा, यदि आपके पास 2 या अधिक इनलाइन तत्व हैं, तो आप इसे लागू करके प्राप्त कर सकते हैं float: right, क्योंकि वे रिवर्स ऑर्डर में प्रदर्शित होंगे:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>