Selektory#

Pseudokalsa zogniskowania#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
: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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa zogniskowania (H2) Specyfikacje i inne materiały (H3)