<main>
  <section aria-labelledby="valid-demo">
    <h2 id="invalid-demo">
      <code>:valid</code> Chained Selectors Demo
    </h2>

    <form id="form-demo" aria-label="Chained selectors demo">
      <div class="field">
        <label for="form-name">
          Zip Code
          <span class="required" aria-hidden="true">*</span>
        </label>
        <input type="text" name="zip-code" id="form-zip-code" value="12345" pattern="[0-9]{5}" required />
      </div>
      <div class="actions">
        <input type="submit" value="submit" id="form-submit" />
      </div>
    </form>
  </section>
</main>
input:focus:valid {
  outline: 3px dashed green;
}

External CSS

  1. https://codepen.io/mrtrimble/pen/qBzPRQw/3aec96a2c27c3da63ced6f464a6cfd35.css

External JavaScript

This Pen doesn't use any external JavaScript resources.