Selektory#
Pseudokalsa aktywacji#
:active { /* deklaracje */ }Pseudoklasa :active ma zastosowanie do elementu, który zostaje aktywowany przez użytkownika. Może to mieć miejsce np. pomiędzy wciśnięciem i zwolnieniem przycisku myszy. W systemach z więcej niż jednym przyciskiem myszy, pseudoklasa :active stosuje się tylko do tego głównego lub głównego przycisku aktywacji (zazwyczaj "lewego" przycisku myszy), oraz ich wszelkich aliasów.
Trzeba być świadomym tego, że w przypadku języków znacznikowych zagnieżdżanie elementów jest czymś naturalnym. Aktywując element położony niżej w hierarchii drzewa węzłów, tak naprawdę aktywujemy jednocześnie wszystkich jego przodków, nawet jeśli wydaje nam się, że wskaźnik urządzenia nie znajduje się bezpośrednio nad nimi.
Język dokumentu lub implementacja może wprowadzać konkretne ograniczenia, na których elementach pseudoklasa aktywności może być realizowana. Tak dzieje się w przypadku HTML5, gdzie zdefiniowano listę aktywowalnych elementów.
Warto przypomnieć, że kontrolka z przypisaną etykietą label i wybierana za pomocą pseudoklasy :active pasuje także w sytuacji, kiedy sama etykieta kontrolki zostanie aktywowana.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
#p1:active {background-color: green;}
#in:active {background-color: red;}
div {margin: 20px 0px;}
#d1:active {border: 10px solid black;}
#d2:active {border: 10px solid blue;}
#d3:active {border: 10px solid white;}
</style>
</head>
<body>
<p id="p1">Akapit po aktywacji myszą powinien mieć niebieskie tło.</p>
<p>Aktywuj myszą poniższą etykietę a kontrolka z prawej uzyska czerwone tło:</p>
<p><label for="in">Etykieta</label> <input id="in"></p>
<div id="d1">Pierwszy kontener DIV (po aktywacji myszą uzyska czarne obramowanie).
<div id="d2">Drugi kontener DIV (po aktywacji myszą uzyska niebieskie obramowanie).
<div id="d3">Trzeci kontener DIV (po aktywacji myszą uzyska białe obramowanie).</div>
</div>
</div>
</body>
</html>Warto zwrócić uwagę na pozagnieżdżane elementy div. Aktywowanie najlepiej rozpocząć od najbardziej zewnętrznego kontenera, czyli elementu z identyfikatorem id="d1" i stopniowo schodzić niżej. Zatrzymując się na ostatnim elemencie powodujemy, że tak naprawdę aktywowane zostają wszystkie. Styl obramowania nie jest dziedziczony, co dodatkowo ułatwia obserwowanie zmian.