2011-08-19 25 views
9

मैं निम्नलिखित (सरलीकृत) HTML संरचना हैCSS चयनकर्ता मौजूद आसन्न भाई अगर

<td> 
    <DIV class="t-numerictextbox"> 
     <DIV class="t-formatted-value">$0.00</DIV> 
     <INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName"> 
    </DIV> 
    <SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN> 
</td> 

मुझे क्या करना माता-पिता div.t-numerictextbox लिए पृष्ठभूमि रंग सेट है, तो लाल होना चाहते हैं क्या अवधि तत्व भी मौजूद है। आसन्न भाई पर इस सशर्त चयन करने के लिए सीएसएस सिंटैक्स क्या है?

Btw, मैं इस के लिए IE 8.

पृष्ठभूमि काम करने के लिए है की जरूरत है, अगर आप उत्सुक हैं:

मैं एक asp.net MVC आवेदन किया है और Telerik MVC NumericTextBox नियंत्रण का उपयोग कर रहा हूँ। जब मेरे पास मॉडलस्टेट सत्यापन त्रुटियां होती हैं, तो एमवीसी फ्रेमवर्क स्वचालित रूप से तत्व पर एक वर्ग = "इनपुट-सत्यापन-त्रुटि" विशेषता डालता है, और स्टाइलशीट लाल रंग में तत्व को हाइलाइट करने के लिए इस वर्ग को चुनता है। हालांकि, यह टेलीरिक एमवीसी नियंत्रण के लिए काम नहीं करता है (मुझे लगता है क्योंकि टेलीरिक की जावास्क्रिप्ट इसे ओवरराइट करता है)।

धन्यवाद!

+0

http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists पर स्वीकृत उत्तर शायद स्वीकृत उत्तर की तुलना में इस समस्या का बेहतर समाधान है, आईई 8 में समर्थन के लिए आवश्यकता के अलावा। – Jules

+0

[सीएसएस का संभावित डुप्लिकेट: केवल बाद का चयन करें यदि बाद में भाई मौजूद है] (http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists) – Jules

उत्तर

15

एचटीएमएल में div से पहले अवधि को स्थानांतरित करना संभव है, और उसके बाद इसे सीएसएस के साथ रखें।

फिर अवधि के आस-पास div का चयन करने के लिए एक सीएसएस आसन्न भाई चयनकर्ता का उपयोग करें।

अंत में अवधि पर पूर्ण स्थिति रखें, और इसे div के नीचे प्राप्त करने के लिए top:..px दें।

तो आप निम्नलिखित प्राप्त:

span + div { 
 
    background-color:red; 
 
}
<td> 
 
    <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span> 
 
    <div class="t-numerictextbox"> 
 
    <div class="t-formatted-value">$0.00</div> 
 
    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName"> 
 
    </div>   
 
</td>

1

सीएसएस कि नहीं कर सकते। Div.t-numerictextbox मौजूद होने पर आप अवधि को शैली बना सकते हैं, लेकिन दूसरी तरफ नहीं। यह सीएसएस की एक सीमा है, लेकिन शायद कभी नहीं बदलेगी।