क्या मैं एक भाई-संयोजक के साथ छद्म-तत्व के बाद पहले या: लक्षित कर सकता हूं?

Question

क्या कोई कारण यह सीएसएस काम नहीं करता है?

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after { 
    content:""; 
    width:10px; 
    height:10px; 
    display:inline-block; 
    background-color:red; 
} 

a[href^="http"] img ~ :after { 
    display:none; 
} 

.. इस HTML पर?

<a href="http://google.com">Test</a> 
<a href="http://google.com"> 
    <img src="https://www.google.com/logos/classicplus.png"> 
</a> 

विचार एंकर टैग से मेल खाने पर छद्म-तत्व होना है। लेकिन मैं नहीं चाहता कि यह एंकर टैग पर लागू हो जो छवि को लपेटें। और चूंकि मैं a < img जैसे कुछ का उपयोग करके एंकर को लक्षित नहीं कर सकता, मुझे लगा कि शायद मैं इसे लक्षित कर सकता हूं: छद्म तत्व के बाद एक छवि ढूंढकर यह एक भाई है।

किसी भी अंतर्दृष्टि की सराहना की जाएगी।

Answer 1

आप लक्षित नहीं कर सकते: चूंकि इसकी सामग्री डीओएम में प्रस्तुत नहीं की जाती है और यह इसे कुशलतापूर्वक नहीं बनाती है - इसके लिए काम करने के लिए डीओएम को फिर से प्रस्तुत करना होगा और सीएसएस इसे इस तरह से कुशल नहीं बना सकता है।

चेक विस्तृत समझ के लिए विनिर्देश: http://www.w3.org/TR/CSS2/generate.html#propdef-content

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

मेरा सुझाव है कि आप अपने लिए काम करने के लिए जावास्क्रिप्ट का उपयोग करें।

Answer 2

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

ऐसा इसलिए है क्योंकि वे छद्म-तत्व हैं, वास्तविक तत्व नहीं हैं, और संयोजक केवल वास्तविक तत्वों के बीच संबंध स्थापित करके काम करते हैं। एक छद्म तत्व, दूसरी ओर, केवल चयनकर्ता (सही कंपाउंड चयनकर्ता) के विषय पर लागू किया जा सकता है, और यह वास्तविक तत्वों पर मिलान के बाद ही होता है। दूसरे शब्दों में, मिलान पहले किया जाता है जैसे कि छद्म-तत्व वहां नहीं था, फिर छद्म-तत्व, यदि यह चयनकर्ता के भीतर इंगित किया गया है, तो प्रत्येक मैच पर लागू होता है।

अपने कोड में, निम्न चयनकर्ता:

a[href^="http"] img ~ :after 

वास्तव में एक :after छद्म तत्व यह है कि a के भीतर एक img के बाद आता है के लिए प्रतीत नहीं होता है, भले ही यह उस तरह से प्रकट होता है के रूप में दोनों बच्चों के रूप में प्रदान कर रहे हैं a तत्व का।

यह निम्न में फिर से लिखा जा सकता है:

a[href^="http"] img ~ *:after 

सूचना * चयनकर्ता, जो निहित है। इसी तरह से आप * को किसी भी अन्य सरल चयनकर्ताओं से इनकार करने से पहले कैसे छोड़ सकते हैं, छद्म-तत्व से * को छोड़कर यह भी वहां रहने के लिए अंतर्निहित है। विवरण के लिए spec देखें।

अब, भले ही ऐसा लगता है *:after अभी भी मेल खाना चाहिए a:after (के बाद से a* से मेल खाएगा), यह अभी भी उस तरह से काम नहीं करता। आप चयनकर्ता से :after छद्म तत्व को निकाल देते हैं:

a[href^="http"] img ~ * 

आप देखेंगे कि पूरी तरह से चयनकर्ता परिवर्तन का मतलब:

किसी भी तत्व
है कि एक के बाद भाई के रूप में प्रकट होता है का चयन करें img
जो a (जिसका href "http" से शुरू होता है) का वंशज है।

img के बाद से अपने HTML में a तत्व की अंतिम संतान है, वहाँ कोई निम्नलिखित भाई बहन मैच के लिए, और इसलिए कोई :after छद्म तत्वों उत्पन्न किया जा सकता है।

एक :before या :after छद्म तत्व के मामले में, एक मिलान छद्म तत्व के "भाई" के लिए छद्म तत्व का सृजन तत्व रिश्तेदार के बारे में सोच सकता है, लेकिन के रूप में ओपी सही ढंग से, there is no parent selector बताया गया है, तो वे वहां भी भाग्य से बाहर हो गया।