CSS2:n näennäisluokkia

Seuraavassa on muutama esimerkki erilaisista näennäisluokista (engl. pseudo).

Esimerkki linkkien näennäisluokista

Seuraavassa muutamia testilinkkejä, joihin vaikuttaa seuraavat CSS-määritykset.

Kannattaa myös huomata, että määritysten järjestyksellä on väliä!

a:link { /* Vierailematon linkki */
  color: blue;
  background-color: white;
}
a:visited { /* Vierailtu linkki */
  color: #800080;
  background-color: white;
}
a:hover { /* Hiirellä osoitettu linkki */
  color: yellow;
  background-color: white;
}
a:focus { /* Tab-aktivoitu linkki */
  color: green;
  background-color: white;
}
a:active { /* Hiirellä painettu linkki */
  color: red;
  background-color: white;
}

Esimerkkejä muista näennäisluokista

Seuraavassa CSS-määritys, jolla muutetaan ensimmäisen rivin ja ensimmäisen kirjaimen määrityksiä. Seuraavan kappaleen luokka on pseudot.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

p.pseudot:first-line {
  text-transform: uppercase;
}
p.pseudot:first-letter {
  font-size: 1.5em;
  float:left;
}

Seuraavassa esimerkki :before ja :after pseudo-ominaisuuksien käytöstä. Seuraavan kappaleen luokka on huomio.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

p.huomio:before {
  content: "Muista! ";
  font-size: 2em;
  color: red;
  background-color: transparent;
}

p.huomio:after {
  content: " - PH ";
  font-size: 1em;
  color: blue;
  background-color: transparent;
}