Pseudo-kelas :active CSS

Definisi dan Penggunaan

CSS :active Pseudo-kelas digunakan untuk memilih dan menata gaya elemen yang sedang diaktifkan pengguna.

:active Pseudo-kelas paling sering digunakan <a> dan <button> elemen. Saat pengguna mengklik tautan, tautan akan diaktifkan; tombol juga sama.

Panduan:Dengan :link Atur gaya tautan halaman yang belum diakses, menggunakan :visited Atur gaya tautan halaman yang telah diakses, menggunakan :hover Atur gaya tautan saat mouse disuspenda.

Perhatian:Dalam definisi CSS,:active Harus ditempatkan :hover(! jika ada) sebelumnya untuk berlaku!

Contoh

Contoh 1

Pilih dan atur gaya untuk tautan yang diaktifkan:

a:active {
  warna-latar: kuning;
}

Coba Sendiri

Contoh 2

Pilih dan atur gaya untuk tombol yang di klik pengguna:

button:active {
  warna-latar: merah muda;
}

Coba Sendiri

Contoh 3

Pilih dan atur gaya untuk elemen <p>, <h1>, dan <a> yang di klik:

p:active, h1:active, a:active {
  warna-latar: kuning;
}

Coba Sendiri

Contoh 4

Pilih dan atur gaya untuk tautan yang belum diakses, yang telah diakses, yang disuspenda mouse, dan yang diaktifkan:

/* Tautan yang belum diakses */
a:link {
  warna: hijau;
}
/* Tautan yang telah diakses */
a:visited {
  warna: hijau;
}
/* Tautan yang disuspenda mouse */
a:hover {
  warna: merah;
}
/* Tautan yang diaktifkan */
a:active {
  warna: kuning;
}

Coba Sendiri

Contoh 5

Atur gaya untuk tautan yang berbeda:

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

Coba Sendiri

Syntaks CSS

:active {
  deklarasi css;
}

Detil Teknologi

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-kelas ini penuh.

Halaman Terkait

Tutorial:Tautan CSS

Tutorial:Tombol CSS

Tutorial:CSS Pseudo-Kelas