Autor publikacji
Virtual Patriot - Administrator

:out-of-range

Data publikacji
Ostatnio edytowano

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>Darmowy 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>

Rezultat

Czerwony kolor tła ma tylko ten element "input", który reprezentuje daną, która posiada wartość niemieszczącą się w określonym dla danego elementu "input" przedziale wartości.

Interpretacja selektora :out-of-range

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji selektora .