24. :indeterminate - CSS3

Przeznaczenie selektora `:indeterminate`

:indeterminate { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :indeterminate, gdy w danym momencie dany element HTML nie posiada jednego ze swoich atrybutów HTML, który z pewnych względów powinien zostać przez nas określony w kodzie dokumentu HTML.

Informacje techniczne o selektorze `:indeterminate`

ograniczenie - elementy HTML

element progress nieposiadający w danym momencie atrybutu value
element HTML reprezentujący pole wyboru typu radio, lecz tylko wtedy, gdy w danym momencie w danej grupie pól wyboru typu radio (do której należy wspomniany element HTML) nie występuje żaden inny element HTML posiadający atrybut checked

ograniczenie - właściwości CSS

brak

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

progress:indeterminate {
  outline:3px solid red;
}

Wyjaśnienie przykładowej reguły CSS

progress:indeterminate { outline:3px solid red; }

progress:indeterminate

do każdego elementu progress, który nie posiada atrybutu value

outline

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

3px solid red

na obrys o szerokości trzech pikseli, stylu solid oraz kolorze czerwonym

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

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

    <style>
      progress:indeterminate {
        outline:3px solid red;
      }
    </style>
  </head>

  <body>

    <label>
      Postęp: <progress max="100"></progress>
    </label>

    <hr>

    <label>
      Postęp: <progress max="100" value="60"></progress>
    </label>

  </body>
</html>