Autor publikacji: Virtual Patriot - Administrator

:required

Data publikacji: Luty 01 2014
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the :required pseudo-class (LV4)

Przeznaczenie selektora `:required`

      :required { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :required, gdy w danym momencie dany element HTML posiada atrybut required.

Informacje techniczne o selektorze `:required`

ograniczenie - elementy HTML

element input posiadający w danym momencie atrybut required
element select posiadający w danym momencie atrybut required
element textarea posiadający w danym momencie atrybut required

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:required`

input:required {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

      input:required { background-color:red; }

input:required: do każdego elementu input, który posiada atrybut required
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:required {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Podaj dowolny ciąg znaków: <input type="text">
    </label>

    <hr>

    <label>
      Podaj nazwę koloru: <input type="text" required>
    </label>

  </body>
</html>

Rezultat

Podaj dowolny ciąg znaków:

Podaj nazwę koloru:

Tylko element "input", który posiada atrybut "required" ma czerwony kolor tła.

Interpretacja selektora `:required`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 10
: tak