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

Wyjaśnienie przykładowej reguły CSS

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

Rezultat

Interpretacja selektora :focus

Last updated