03. :focus

Przeznaczenie selektora `:focus`

:focus { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :focus, gdy w danym momencie dany element HTML jest elementem HTML, na którym skupił się użytkownik (na przykład za pomocą przycisku TAB lub poprzez kliknięcie na dany element HTML) lub gdy w danym momencie dany element HTML jest elementem HTML, na którym powinien skupić się użytkownik (na przykład dlatego że w danym momencie dany element HTML posiada atrybut autofocus).

Informacje techniczne o selektorze `:focus`

ograniczenie - elementy HTML

element button
element input
element select
element textarea
element a
element area
element HTML posiadający w danym momencie atrybut contenteditable o wartości true

ograniczenie - właściwości CSS

brak

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

input:focus {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

input:focus { background-color:red; }

input:focus

do każdego elementu input, którego cechy w danym momencie spełniają zasadę pseudoklasy :focus

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:focus {
        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">
    </label>

  </body>
</html>