CSS : actieve kiezer
Voorbeeld
Selecteer en stijl de actieve link:
a:active
{
background-color: yellow;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De :active
selector wordt gebruikt om de actieve link te selecteren en te stylen.
Een link wordt actief als je erop klikt.
Tip: De :active selector kan op alle elementen worden gebruikt, niet alleen op links.
Tip: Gebruik de :link selector om links naar niet-bezochte pagina's op te maken, de :visited selector om links naar bezochte pagina's te stylen, en de :hover selector om links een stijl te geven wanneer u er met de muis overheen gaat.
Opmerking: :active MOET na :hover komen (indien aanwezig) in de CSS-definitie om effectief te zijn!
Versie: | CSS1 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de selector volledig ondersteunt.
Selector | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS-syntaxis
:active {
css declarations;
}
Meer voorbeelden
Voorbeeld
Selecteer en style een <p>, <h1> en <a> element wanneer je erop klikt:
p:active, h1:active, a:active {
background-color: yellow;
}
Voorbeeld
Selecteer en stijl niet-bezochte, bezochte, zwevende en actieve links:
/* 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;
}
Voorbeeld
Stijllinks met verschillende stijlen:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-koppelingen
CSS-zelfstudie: CSS-pseudoklassen