title: What's the difference between :out-of-range and :invalid?
body: <p>Example </p>
  
  <pre class="lang-css prettyprint-override"><code>input[type="number"] {
      background: white;
      color: black;
  }
  input[type="number"]:in-range {
      background: green;
      color: white;
  }
  input[type="number"]:out-of-range {
      background: red;
      color: white;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input c type="number" min="1" max="100"&gt;
  </code></pre>
  
  <p>What's the difference between <code>:out-of-range</code> and <code>:invalid</code>?</p>