28. :out-of-range - CSS3

Przeznaczenie selektora `:out-of-range`

:out-of-range { ... }

Selektor :out-of-range odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :out-of-range.

Cechy elementu HTML spełniają zasadę pseudoklasy :out-of-range, gdy w danym momencie dany element HTML reprezentuje daną, która posiada wartość, która to wartość nie mieści się w przedziale wartości, jaki został określony dla wspomnianego elementu HTML.

Informacje techniczne o selektorze `:out-of-range`

ograniczenie - elementy HTML

element input typu date posiadający w danym momencie atrybut min oraz atrybut max
element input typu time posiadający w danym momencie atrybut min oraz atrybut max
element input typu number posiadający w danym momencie atrybut min oraz atrybut max

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:out-of-range`

input:out-of-range {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

input:out-of-range { background-color:red; }

input:out-of-range

do każdego elementu input, który reprezentuje daną, która posiada wartość niemieszczącą się w określonym dla danego elementu input przedziale wartości

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kurs CSS</title>

    <style>
      input:out-of-range {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Wybierz wartość z przedziału wartości:
      <input type="number" min="0" max="100" value="60">
    </label>

    <hr>

    <label>
      Wybierz wartość z przedziału wartości:
      <input type="number" min="5" max="10" value="2">
    </label>

  </body>
</html>