Pseudoklasa :active w CSS

Definicja i użycie

CSS :active Pseudoklasy są używane do wyboru i ustawiania stylów dla elementów, które użytkownik aktualnie aktywuje.

:active Pseudoklasy są najczęściej używane do <a> i <button> elementów. Kiedy użytkownik kliknie link, zostanie on aktywowany; tak samo jest z przyciskami.

Wskazówka:Używaj :link Ustaw styl linków dla nieodwiedzonych stron, używając :visited Ustaw styl linków dla odwiedzonych stron, używając :hover Ustaw styl linków przy wskazywaniu myszką.

Uwaga:W definicji CSS,:active Musi być umieszczony :hovermusi być zastosowany (jeśli istnieje)!

Przykład

Przykład 1

Wybierz i ustaw style dla aktywnych linków:

a:active {
  background-color: yellow;
}

Spróbuj sam

Przykład 2

Wybierz i ustaw style dla <button> przy kliknięciu:

button:active {
  background-color: pink;
}

Spróbuj sam

Przykład 3

Wybierz i ustaw style dla <p>, <h1> i <a> elementów przy kliknięciu:

p:active, h1:active, a:active {
  background-color: yellow;
}

Spróbuj sam

Przykład 4

Wybierz i ustaw style dla nieodwiedzonych, odwiedzonych, wskazywanych myszką i aktywnych linków:

/* Nieodwiedzony link */
a:link {
  color: green;
}
/* Odwiedzony link */
a:visited {
  color: green;
}
/* Link wskazywany myszką */
a:hover {
  color: red;
}
/* Aktywny link */
a:active {
  color: yellow;
}

Spróbuj sam

Przykład 5

Ustaw różne style dla linków:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Spróbuj sam

CSS składnia

:active {
  deklaracje css;
}

Szczegóły techniczne

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę pseudoklasę.

Strony związane

Tutorial:CSS linki

Tutorial:CSS przyciski

Tutorial:CSS pseudoklasy