CSS :active pseudoklasse

definitie en gebruik

CSS :active pseudoklassen worden gebruikt om de stijl van de elementen die de gebruiker actief activeert, te kiezen en in te stellen.

:active pseudoklassen worden het meest gebruikt voor <a> en <button> elementen. Wanneer de gebruiker op een koppeling klikt, wordt deze geactiveerd; hetzelfde geldt voor knoppen.

tip:gebruik :link stel de stijl in voor de koppeling van onbezoekte pagina's, gebruik :visited stel de stijl in voor de koppeling van bezochte pagina's, gebruik :hover stel de stijl in voor de koppeling bij muisovergang.

let op:in CSS-definities,:active moet worden geplaatst :hovermoet na (indien aanwezig) worden geactiveerd!

voorbeeld

voorbeeld 1

kies en stel de stijl in voor actieve koppelingen:

a:active {
  achtergrondkleur: geel;
}

probeer het zelf

voorbeeld 2

kies en stel de stijl in voor de klikkende <button>:

button:active {
  achtergrondkleur: roze;
}

probeer het zelf

voorbeeld 3

kies en stel de stijl in voor klikkende <p>、<h1> en <a> elementen:

p:active, h1:active, a:active {
  achtergrondkleur: geel;
}

probeer het zelf

voorbeeld 4

kies en stel de stijl in voor onbezoekte, bezochte, hover en actieve koppelingen:

/* Nog niet bezochte koppeling */
a:link {
  kleur: groen;
}
/* Bezoekte koppeling */
a:visited {
  kleur: groen;
}
/* Koppeling met muis over */
a:hover {
  kleur: rood;
}
/* Actieve koppeling */
a:active {
  kleur: geel;
}

probeer het zelf

voorbeeld 5

stel verschillende stijlen in voor de koppeling:

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

probeer het zelf

CSS syntaxis

:active {
  css declaraties;
}

technische details

browserondersteuning

De cijfers in de tabel specificeren de eerste browserversie die deze pseudoklasse volledig ondersteunt.

gerelateerde pagina's

handleiding:CSS koppeling

handleiding:CSS knop

handleiding:CSS pseudoklassen