<h2>Using Sibling Selector to Display a Message</h2>
<p>Enter some text in to each input to make them all valid. A message should appear!</p>
<input type="text" class="input" id="input1" value="this is valid because it has a value" required="required" /><br /><br />
<input type="text" class="input" id="input2" value="this has a value" required="required" /><br /><br />
<input type="text" class="input" id="input3" value="this has a value" required="required" /><br /><br />
<input type="text" class="input" id="input4" value="this has a value" required="required" /><br /><br />
<input type="text" class="input" id="input5" value="" required="required"  placeholder="type something here..." /><br /><br />
<span class="valid-message">yay, all these input fields are valid</span>

body {
  text-align: center;
}

.input {
  width: 400px;
}
.valid-message {
  display: none;
}
#input1:valid
  ~ #input2:valid
  ~ #input3:valid
  ~ #input4:valid
  ~ #input5:valid
  ~ .valid-message {
  display: block;
}