Vraag CSS-selector als er naastliggende broer of zus bestaat


Ik heb de volgende (vereenvoudigde) HTML-structuur

<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>

Wat ik zou willen doen is de achtergrondkleur instellen op de bovenliggende div.t-numerictextbox rood te zijn ALS het span-element ook bestaat. Wat is de css-syntaxis om deze voorwaardelijke selectie op een aangrenzende broer / zus te maken?

BTW, ik wil dat dit werkt voor IE 8.

Achtergrond, als je nieuwsgierig bent:

Ik heb een asp.net MVC-applicatie en gebruik de Telerik MVC NumericTextBox Control. Wanneer ik validatiefouten voor ModelState heb, voegt het MVC-framework automatisch een class = "input-validatiefout" -attribuut in het element in, en het stylesheet kiest deze klasse om het element in rood te markeren. Het werkt echter niet voor de Telerik MVC Control (ik neem aan omdat Javascript van Telerik dit overschrijft).

Bedankt!


10
2017-08-19 19:35


oorsprong


antwoorden:


Het is mogelijk om de reeks vóór de div in de html te plaatsen en deze vervolgens met css te positioneren.

Gebruik vervolgens een css aangrenzende siblingselectie om de div naast de overspanning te selecteren.

Plaats ten slotte een positie absoluut op de overspanning en geef deze een top:..px om het onder de div te krijgen.

Dus je krijgt het volgende:

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>


18
2017-08-19 19:56



CSS kan dat niet doen. Je kunt de reeks stijlen als de div.t-numerictextbox bestaat, maar niet andersom. Dit is een beperking van css, maar zal waarschijnlijk nooit veranderen.


1
2017-08-19 19:59