Question

Hey I have a little problem and i can’t solve it.

Here is the CSS:

.error {
  float: left;
  color: #F00;
  visibility: hidden;
  display: inline;  
}
.validieren:required:invalid + .error {
   visibility: visible;
}

.right {
  float: left;
  color: #0F0;
  visibility: hidden;
  display: inline;
}

.validieren:required:valid + .right {
  visibility: visible;
}

And here is the HTML Code:

<img src="haken.gif" class="right"> <img src="kreuz.gif" class="error">

The problem is that the second (in this case error) image doesn’t appear.

Thanks for your help.

Sorry for my language i’m german.

Answer 1

Try this:

.validieren:required:invalid ~ .error {
   visibility: visible;
}

You have both .validieren + .error and .validieren + .right.

.validieren can’t be immediately followed (adjacent sibling selector) by both .error and .right.

Changing to the general sibling selector should make it work. I’m assuming that the .validieren element comes before (and shares the same parent as) both the images.