:focus
- Data publikacji
- Ostatnio edytowano
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).
W tym samym dokumencie HTML w tym samym momencie maksymalnie tylko jeden element HTML może spełniać zasadę pseudoklasy ":focus".
Informacje techniczne o selektorze :focus
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>Darmowy 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>
Rezultat
Tylko na czas wprowadzania własnego tekstu do interesującego nas element "input" (czyli tylko na czas skupienia się na interesującym nas elemencie "input") wspomniany element "input" będzie posiadał czerwony kolor tła.
Interpretacja selektora :focus
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 8
-
tak