CSS : aktywny selektor
Przykład
Wybierz i stylizuj aktywne łącze:
a:active
{
background-color: yellow;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Selektor :active
służy do wybierania i stylizowania aktywnego łącza.
Link staje się aktywny po jego kliknięciu.
Wskazówka: selektora :active można używać na wszystkich elementach, nie tylko na łączach.
Wskazówka: Użyj selektora :link do stylizowania linków do nieodwiedzonych stron, selektora :visited do stylizowania linków do odwiedzanych stron, a selektora :hover do stylizowania linków po najechaniu na nie myszą.
Uwaga: :active MUSI występować po :hover (jeśli jest obecny) w definicji CSS, aby było skuteczne!
Wersja: | CSS1 |
---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje selektor.
Selector | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Składnia CSS
:active {
css declarations;
}
Więcej przykładów
Przykład
Wybierz i nadaj styl elementowi <p>, <h1> i <a> po kliknięciu:
p:active, h1:active, a:active {
background-color: yellow;
}
Przykład
Wybierz i stylizuj linki nieodwiedzone, odwiedzone, najedź kursorem i aktywne:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Przykład
Style linki z różnymi stylami:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Powiązane strony
Samouczek CSS: Linki CSS
Samouczek CSS: CSS Pseudoklasy