CSS :active pseudoklasse

määrittely ja käyttö

CSS :active pseudolajit käytetään valitsemaan ja asettamaan tyylejä käyttäjän aktiiviselle elementille.

:active pseudolajit käytetään yleisimmin <a> ja <button> elementti. Kun käyttäjä napsauttaa linkkiä, se aktivoidaan; samoin painikkeet.

Vinkki:käyttää :link Aseta ei vieraillun sivun linkkien tyylit käyttämällä :visited Aseta vieraillun sivun linkkien tyylit käyttämällä :hover Aseta hiiren osoittimen yllä olevien linkkien tyylit.

Huomioitavaa:CSS-määrittelyissä:active on asetettava :hovertoimii vain (jos olemassa)!

esimerkki

esimerkki 1

Valitse ja aseta tyylit aktiivisille linkkeille:

a:active {
  background-color: yellow;
}

kokeile itse

esimerkki 2

Valitse ja aseta tyylit klikatessa <button>-elementti:

button:active {
  background-color: pink;
}

kokeile itse

esimerkki 3

Valitse ja aseta tyylit klikatessa <p>-, <h1>- ja <a>-elementit:

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

kokeile itse

esimerkki 4

Valitse ja aseta tyylit valitsemille, ei vieraillut, vieraillut, hiiren osoittimen yllä ja aktiiviset linkit:

/* Ei vieraillut linkit */
a:link {
  color: green;
}
/* Vieraillut linkit */
a:visited {
  color: green;
}
/* Hiiren osoittimen yllä olevat linkit */
a:hover {
  color: red;
}
/* Aktivoidut linkit */
a:active {
  color: yellow;
}

kokeile itse

esimerkki 5

Aseta linkkeille erilaisia tyylejä:

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

kokeile itse

CSS syntaksi

:active {
  css lausunnot;
}

tekniset yksityiskohdat

selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee tätä pseudolajia.

liittyvät sivut

opetusohjelma:CSS linkit

opetusohjelma:CSS painikkeet

opetusohjelma:CSS pseudolajit