“~” (Tilde / squiggle / twiddle) CSS चयनकर्ता का क्या अर्थ है?

Question

~चरित्र की खोज करना आसान नहीं है। मैं कुछ सीएसएस पर देख रहा था और यह पाया

.check:checked ~ .content {
}

इसका क्या मतलब है?

Comments

चेक डेमो आप समझ जायेंगे कि यहाँ CSS चयनकर्ताओं की एक सूची है

— दीपक

@TylerH, यह स्टैक ओवरफ्लो पोस्ट में उपयोग की जाने वाली कुछ बहुत ही सामान्य बात है, कृपया इसे आसानी से लें, मेरा इरादा इसे बदतर बनाने का नहीं था।

— आर्सेन खाचरतिन

@ArsenKhachaturyan शायद आपको गलतफहमी हो; ब्लॉक कोट सिंटैक्स एक उद्धरण को इंगित करने के लिए है , जो तब होता है जब कोई उपयोगकर्ता कुछ इंगित कर रहा होता है (पाठ, एक छवि, कोड, आदि) उनका अपना काम या शब्द नहीं है, लेकिन कहीं और से कॉपी किया जाता है। सभी स्वरूपण की तरह, इसका एक अर्थपूर्ण उद्देश्य है; यह विली-नीली जोड़ा जाना नहीं है। इसी तरह, कृपया शब्दों में यादृच्छिक बोल्ड हाइलाइटिंग न जोड़ें। इसे जोर से, संयम से इस्तेमाल किया जाना चाहिए।

— टायलरएच

@ टायलर मैं समझता हूं कि यह नाम "उद्धरण" है और यह भी कि "बोली" का अर्थ क्या है। हालांकि कुछ समय जब आप वास्तव में साधारण पाठ से प्रश्नों को अलग करना चाहते हैं तो आप कुछ जोर देने की कोशिश कर सकते हैं जैसे मैंने किया। जब आप किसी चीज़ पर ज़ोर देना चाहते हैं, जैसे कि कीवर्ड्स या अच्छी तरह से ज्ञात शब्दों का उपयोग करना, तो इसे बोल्ड करने के लिए भी स्पष्ट है। मुझे आमतौर पर पसंद नहीं है जब लोग अज्ञात कारणों से बल्डिंग का उपयोग करते हैं लेकिन कभी-कभी इसका उपयोग लोगों को आसानी से विषय से संबंधित जानकारी प्राप्त करने के लिए किया जा सकता है।

— आर्सेन खाचरतिन

@ArsenKhachaturyan कृपया ऐसा न करें। केवल उद्धरण के> लिए है , इसका उपयोग किसी अन्य उद्देश्य के लिए नहीं किया जाता है। आपको प्रश्न में यादृच्छिक प्रौद्योगिकियों के नाम भी नहीं चाहिए। हम देख सकते हैं कि टैग के माध्यम से कौन सी प्रौद्योगिकियां प्रासंगिक हैं।

— meagar

Answer 1

~चयनकर्ता वास्तव में जनरल भाई Combinator (में बाद-भाई Combinator नाम दिया चयनकर्ताओं स्तर 4 ):

सामान्य सिबलिंग कॉम्बिनेटर "टिल्ड" (U + 007E, ~) वर्ण से बना है जो सरल चयनकर्ताओं के दो अनुक्रमों को अलग करता है। दो अनुक्रमों द्वारा दर्शाए गए तत्व दस्तावेज़ के पेड़ में एक ही माता-पिता को साझा करते हैं और पहले अनुक्रम द्वारा तत्व का प्रतिनिधित्व किया जाता है (जरूरी नहीं कि तुरंत) दूसरे द्वारा प्रतिनिधित्व किया गया तत्व।

निम्नलिखित उदाहरण पर विचार करें:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b 4 वें और 5 वें सूची आइटम से मेल खाता है क्योंकि वे:

• कर रहे हैं .bतत्वों
• के भाई-बहन हैं .a
• .aHTML स्रोत आदेश के बाद दिखाई देते हैं ।

इसी तरह, .check:checked ~ .contentउन सभी .contentतत्वों से मेल खाता है जो उसके भाई-बहन हैं .check:checkedऔर उसके बाद दिखाई देते हैं।

Comments

"जरूरी नहीं कि तुरंत" इस विवरण का प्रमुख हिस्सा है।

— पैनिकबस

क्या एक ही माता-पिता के साथ सभी तत्वों के लिए एक चयनकर्ता भी है?

— निक एन।

@NickN। तुम्हारा मतलब है .parent > *?

— सलमान ए

@ सलमान बिल्कुल नहीं, मैं उम्मीद कर रहा था कि एक चयनकर्ता है जिसे आप उपयोग कर सकते हैं, यदि आप माता-पिता को नहीं जानते हैं।

— निक एन।

@ NickN.No नहीं है। सीएसएस प्रस्ताव के साथ बनाया गया है कि सीएसएस पार्सर एक मैच बनाने के लिए कभी भी डोम में पीछे नहीं देखता है। यही कारण है कि माता-पिता चयनकर्ता नहीं है।

— यंगजेन

Answer 2

परिवार में अन्य कॉम्बीनेटरों की जांच करने के लिए और इस विशिष्ट एक को वापस पाने के लिए अच्छा है।

• ul li
• ul > li
• ul + ul
• ul ~ ul

उदाहरण चेकलिस्ट:

• ul li- अंदर खोज रहे हैं - चयन सभीli तत्वों रखा (कहीं) के अंदर ul; वंशज चयनकर्ता
• ul > li- अंदर देखना - केवल के प्रत्यक्ष li तत्वों का चयन करता है ul; यानी यह केवल प्रत्यक्ष बच्चों liका चयन करेगा ul; चाइल्ड सिलेक्टर या चाइल्ड कॉम्बिनेटर सेलेक्टर
• ul + ul- बाहर देखना - के ulतुरंत बाद का चयन करता है ul; यह अंदर नहीं दिख रहा है, लेकिन तुरंत निम्नलिखित तत्व की तलाश में है; आसन्न सिबलिंग चयनकर्ता
• ul ~ ul- बाहर देखना - वह सब चुनता है ulजो इस ulबात से भिन्न नहीं है कि वह कहाँ है, लेकिन दोनों ulको एक ही माता-पिता होना चाहिए; सामान्य सहोदर चयनकर्ता

---

हम यहां जो देख रहे हैं, वह जनरल सिबलिंग सेलेक्टर है

Comments

यह एक सबसे समझ में आया। बचाव के लिए लेमन की शब्दावली फिर से। अब मैं तकनीकी दस्तावेज पढ़ सकता हूं।

— TheRealChx101

क्या सभी भाई-बहनों के लिए भाई-बहन का चयन किया जाता है, न कि केवल उन लोगों का जो अनुसरण करते हैं?

— एली थेहमन

@ एली हनुमान, नहीं। कृपया अधिक विवरण के लिए इस SO पोस्ट को देखें - stackoverflow.com/a/11813469/6830901

— Lijo Joseph

Answer 3

सामान्य सहोदर संयोजक

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

और जानकारी

Answer 4

यह General sibling combinator@ सलमान के जवाब में बहुत अच्छी तरह से समझाया गया है।

मैंने Adjacent sibling combinatorजो किया वह मिस किया +और जो निकट से संबंधित है ~।

उदाहरण होगा

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• तत्वों का मिलान करता है .b
• से सटे हुए हैं .a
• .aHTML के बाद

ऊपर के उदाहरण में यह 2 liनहीं बल्कि 4 का अंकन करेगा ।

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Answer 5

ध्यान दें कि एक विशेषता चयनकर्ता (जैसे [attr~=value]) में, टिल्ड

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors