चयनकर्ताओं के बीच अंतर div + p (प्लस) और div ~ p (टिल्ड)

Question

जिस तरह से w3schools वाक्यांशों, वे एक ही ध्वनि।

W3Schools 'CSS सन्दर्भ

div + p
उन सभी <p>तत्वों का चयन करता है जो तत्वों के तुरंत बाद रखे जाते <div>हैं

div ~ p
प्रत्येक <p>तत्व का चयन करता है जो एक <div>तत्व से पहले होता है

यदि एक <p>तत्व के तुरंत बाद एक <div>तत्व है, तो इसका मतलब यह नहीं है कि <p>तत्व एक तत्व से पहले है <div>?

किसी भी तरह, मैं एक चयनकर्ता की तलाश में हूं जहां मैं एक तत्व का चयन कर सकता हूं जो किसी दिए गए तत्व से तुरंत पहले हो ।

Comments

+तत्काल बगल में है pतत्व और ~है सब अगले की p(प्रत्येक के बाद तत्वों divतत्व)

— vsync

तुम नहीं कर सकते before। असंभव। केवल जावास्क्रिप्ट के साथ। आपको इसके लिए देखना होगा और यह beforeआपके सीएसएस में लक्षित करने के लिए एक वर्ग है।

— १६:३६

इसके अलावा w3schools से बचने की कोशिश करें :) w3fools.com

— एलेक्स चार

इसे दृश्य विवरण के लिए देखें

— मार्क बी

इस प्रश्न के बारे में एक दिलचस्प बात यह है कि यह पहले नहीं पूछा गया था। कम से कम मुझे SO पर कोई समान प्रश्न नहीं मिला।

— हशेम क़ोलमी

Answer 1

आसन्न भाई चयनकर्ता X + Y

समीपवर्ती सिबलिंग चयनकर्ताओं में निम्नलिखित सिंटैक्स होते हैं: E1 + E2, जहां E2 चयनकर्ता का विषय है। चयनकर्ता मेल खाता है यदि E1 और E2 दस्तावेज़ के पेड़ में समान माता-पिता को साझा करते हैं और E1 तुरंत गैर-तत्व नोड्स (जैसे पाठ नोड्स और टिप्पणियां) की अनदेखी करते हुए, E2 से पहले निकलता है।

ul + p {
   color: red;
}

इस उदाहरण में यह केवल उस तत्व का चयन करेगा जो पूर्व तत्व से तुरंत पहले हो। इस स्थिति में, प्रत्येक उल के बाद केवल पहले पैराग्राफ में लाल पाठ होगा।

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

सामान्य भाई चयनकर्ता X ~ Y

~ कॉम्बिनेटर दो चयनकर्ताओं को अलग करता है और केवल दूसरे तत्व से मेल खाता है यदि यह पहले से पहले है, और दोनों एक आम अभिभावक को साझा करते हैं।

ul ~ p {
   color: red;
}

यह सहोदर कॉम्बिनेटर एक्स + वाई के समान है, हालांकि, यह कम सख्त है। जबकि एक समीपवर्ती चयनकर्ता (ul + p) केवल पहले तत्व का चयन करेगा जो कि पूर्व चयनकर्ता द्वारा तुरंत लिया गया है, यह एक अधिक सामान्यीकृत है। यह ऊपर, हमारे उदाहरण का उल्लेख करते हुए, किसी भी पी तत्वों का चयन करेगा, जब तक कि वे उल का पालन करते हैं।

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

स्रोत

code.tutsplus

सामान्य भाई-बहन चयनकर्ता MDN

आसन्न भाई चयनकर्ताओं w3

Comments

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

— BoltClock

@BoltClock धन्यवाद मैं अपनी बात प्राप्त करता हूं। मैं हमेशा आप से प्रतिक्रिया का स्वागत करता हूं। लेकिन मुझे लगता है कि मेरा जवाब ओपी को समझाता है कि उन चयनकर्ताओं के बीच क्या अंतर है।

— एलेक्स चार

यह सच है। हालांकि यह सवाल का काफी समाधान नहीं करता है, लेकिन यह दो चयनकर्ताओं के बीच अंतर को दर्शाने का एक उचित काम करता है।

— BoltClock

@AlexChar इन दोनों के बीच के अंतर को बेहतर दिखाने के लिए, आपको X + Y और X ~ Y दोनों के लिए समान HTML उदाहरण का उपयोग करना चाहिए

— thecoolmacdude

@thecoolmacdude किया। प्रतिक्रिया के लिए धन्यवाद। अब मुझे लगता है कि यह अधिक स्पष्ट है।

— एलेक्स चार

Answer 2

यदि एक <p>तत्व के तुरंत बाद एक <div>तत्व है, तो इसका मतलब यह नहीं है कि <p>तत्व एक तत्व से पहले है <div>?

यह सही है। दूसरे शब्दों में, div + pएक उचित उपसमूह है div ~ p- पूर्व द्वारा मिलान की गई कुछ भी आवश्यकता के अनुसार, बाद के द्वारा मिलान किया जाता है।

के बीच का अंतर +और ~वह यह है कि ~सभी निम्नलिखित भाई बहन पहला तत्व से उनकी निकटता की परवाह किए बिना मेल खाता है, जब तक कि वे दोनों शेयर एक ही मूल।

इन दोनों बिंदुओं को सबसे अधिक एक उदाहरण के साथ स्पष्ट रूप से चित्रित किया गया है, जहां प्रत्येक नियम एक अलग संपत्ति लागू करता है। ध्यान दें कि pजो तुरंत divलागू होता है उसके दोनों नियम लागू होते हैं:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

किसी भी तरह, मैं एक चयनकर्ता की तलाश में हूं जहां मैं एक तत्व का चयन कर सकता हूं जो किसी दिए गए तत्व से तुरंत पहले हो ।

दुर्भाग्य से, वहाँ अभी तक एक नहीं है ।

Answer 3

इस उदाहरण पर विचार करें:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

Answer 4

1) निकटवर्ती सिबलिंग चयनकर्ता (S1 + S2)

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

div + p {
    color:red;
}

आसन्न सिबलिंग चयनकर्ता उदाहरण

2) जनरल सिबलिंग सेलेक्टर्स (S1 ~ S2)

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

div ~ p {
   color:red;
}

जनरल सिबलिंग सेलेक्टर्स का उदाहरण

आसन्न सिबलिंग (S1 + S2) बनाम जनरल सिबलिंग (S1 ~ S2) चयनकर्ता:

आसन्न सिबलिंग (S1 + S2) चयनकर्ता तत्काल सिबलिंग तत्व का चयन करता है, लेकिन सामान्य सिबलिंग (S1 ~ S2) चयनकर्ता किसी अन्य निर्दिष्ट तत्व के सभी सिबलिंग तत्वों का चयन करता है। दोनों मामले, दोनों तत्व (S1 और S2) समान स्तर के होने चाहिए।

शेष चयनकर्ताओं को यहां समझाया गया है: https://www.csssolid.com/35-css-selectors-to-remember.html