The Second image is not visible

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

.vali开发者_StackOverflow中文版dieren: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.

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.

The problem is, your error class contains an attribute (specifically visibility: hidden) that forces your image (or element) to not display.

You have visibility: hidden set for the error class, which is assigned to the second image. What behavior are you expecting?