title: Changing the color of a label without js if input validation fails
body: <p>I have a form, with a label and input type=text. I am using the pattern="" to validate the text and am displaying a message under the text input when the validation fails. I want to be able to change the color of the label as well as the text inside the text input, but cant seem to get it going. This is what I have so far. I do not want to use js.</p>
  
  <pre><code>               &lt;div class="form-group address"&gt;
                  &lt;label for="address" class="form-group__names" id="invalid"&gt;Address&lt;/label&gt;
                  &lt;input type="text" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z] 
                  {2}\s+\d{5}" /&gt;
                  &lt;b&gt;&lt;/b&gt;
                &lt;/div&gt;
  
              .form-group input:invalid + b:before {
               content: "Form is invalid";
               color: red;
              }
  
               input[type="text"]:invalid + label#invalid {
               color: red;
              }
  </code></pre>