Selektory#
Pseudokalsa zogniskowania#
:focus { /* deklaracje */ }Pseudoklasa :focus ma zastosowanie do elementu, który otrzymał zogniskowanie (inaczej fokus). Zogniskowanie jest stanem, w którym element przyjmuje zdarzenia klawiatury lub myszy, choć możliwe są inne formy wejścia.
Liczba elementów ze stanem zogniskowania w tym samym momencie jest zależna od języka dokumentu oraz samych aplikacji klienckich. Najnowszy HTML5 podaje kilka wytycznych w tym obszarze. Z praktycznego punktu widzenia, w danej chwili, tylko jeden element może uzyskać zogniskowanie.
Nie wszystkie elementy mogą przyjmować fokus. W przypadku (X)HTML domyślnie ogniskującymi elementami są: A, AREA, BUTTON, SELECT, TEXTAREA oraz INPUT. W ich wypadku fokus uzyskuje się zazwyczaj za pomocą klawiatury (np. klawiszem tabulatora), choć w niektórych przypadkach także i myszą. Wykorzystując specyficzne atrybuty możemy zmienić kolejność poruszania się po elementach oraz przywołać konkretny element za pomocą unikatowego skrótu z klawiatury. W niektórych przypadkach te dodatkowe atrybuty pozwalają także rozszerzyć zogniskowanie na kilka innych elementów.
Warto przypomnieć, że kontrolka z przypisaną etykietą label i wybierana za pomocą pseudoklasy :focus pasuje także w sytuacji, kiedy sama etykieta kontrolki zostanie aktywowana.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:focus {
margin-left: 50px;
background-color: green;
}
</style>
</head>
<body>
<p>Zmień zogniskowanie w elementach przy użyciu tabulatora lub myszy.</p>
<p>type="text" <input size="40" type="text"></p>
<p>type="password" <input type="password"></p>
<p>type="radio" <input type="radio"></p>
<p>type="checkbox" <input type="checkbox"></p>
<p>type="file" <input type="file"></p>
<p>type="reset" <input type="reset"></p>
<p>type="button" <input type="button" value="Press"></p>
<p>button <button>Przycisk</button></p>
<p><label for="in">Etykieta</label> <input id="in"></p>
<p>select + option
<select>
<option>Mozilla Firefox</option>
<option>Microsoft Internet Explorer</option>
</select>
</p>
<p>textarea <textarea rows="3" cols="55"></textarea></p>
<ul>
<li><a href="http://www.google.com">www.google.com</a></li>
<li><a href="http://www.crimsteam.site90.net">www.crimsteam.site90.net</a></li>
<li><a href="http://www.w3.org">www.w3.org</a></li>
</ul>
</body>
</html>W ramach uzupełnienia warto zapoznać się z opisem modułu zdarzeń zogniskowania.