CSS detect if selector has div next to it and change the former

Asked Dec 20 '17 at 15:00

Active Dec 20 '17 at 15:00

Viewed 33 times

I have the following html but I need to write CSS to do the following.

IF .hint or any other div follows <div class="md-errors-spacer"></div> then to display <div class="md-errors-spacer"></div>

<md-input-container flex="">
  <label>New password</label>
  <input autocomplete="no" type="password">
  <div class="md-errors-spacer"></div>
  <div class="hint">Confirm your password with any change</div>
</md-input-container>

I have tried using + ~ in the css but this ends up selecting the .hint div

ie: md-input-container .md-errors-spacer ~ .hint

I just want to be able to check if .hint exists and then alter .md-errors-spacer

CodePen

asked Dec 20 '17 at 15:00

This is more of an angular question than a html css question – SynchroDynamic Dec 20 '17 at 15:02
@SynchroDynamic not really. – hungerstar Dec 20 '17 at 15:02
When do you want it happen? On page load or ? – slon Dec 20 '17 at 15:03
Not familiar with Angular but if there is guaranteed to be nothing after div.hint in the actual element tree regardless of whether div.hint itself appears, then you can get away with .md-errors-spacer:not(:last-child). – BoltClock Dec 20 '17 at 15:03

CSS detect if selector has div next to it and change the former

0 Answers0