Päivitetty: 22.06.2002 .

Dynaaminen Pseudo

Esimerkkejä:

Ominaisuudet [ Pop-up / New Window ]

Sääntö 1: 'normaali tilanne'

CSS-sääntö:

a:link { color: Red }
a:visited { color: Red }
/* huom! järjestys*/
a:hover { background-color: red; color: white }
a:focus { background-color: navy; color: lime }
a:active{ background-color: gray; color: blue}

Huom!
Jos active määritys esiintyy ennen hoveria, määritys tulee voimaan (IE:ssä) vasta kun hiiren kohdistin viedään pois linkin päältä!
Tulos:

<P> -kappale, jossa
Sääntö 1:n mukainen linkki
</P>

Selitys:

:link ja :visited, linkin ja käytetyn linkin värit
:hover, kun viet hiiren kohdistimen linkin päälle
:active, kun napsautat linkkiä
:focus, kun painike on alas painettuna (ei toimi vielä edes IE 5.5 / Opera 5.12 ehkä NN 6?)

<< Alkuun

Sääntö 2: 'jälkeläisvalitsin'

CSS-sääntö:

Seuraava sääntö vaikuttaa vain kuin linkki esiintyy <OL> -elementissä. Sääntö alkaa aivan kuin luotaisiin määritys <ol> -elementille. Seuraavaksi tulee välilyönti ja se elementti jolle muotoilu kohdistuu.

Huomaa, että jos säännössä olisi pilkku (ol, a) sääntö kohdistuisi elementtiin <ol> sekä <a>. Mutta nyt se siis kohdistuu vain <a> -elementtiin kun se esiintyy <ol> -elementissä.

ol a { text-decoration: none }
ol a:link { color: blue }
ol a:visited { color: blue }
ol a:hover { background-color: white; text-decoration: underline; letter-spacing: 8px }
ol a:active { background-color: white; text-decoration: underline; letter-spacing: 8px; color: red }
Tulos:
  1. OL-lista
  2. Sääntö 2:n mukainen likki
  3. OL jatkuu..

 

Selitys:

a alleviivauksen poisto (määritys on annettu suoraan (ol a) parille, joten se periytyy kaikkiin pseudo-märittelyihin)
:link ja :visited linkin ja käytetyn linkin värit
:hover alleviivaus ja kirjaintenvälit
:active sama kun hover + punainen väri

Huom!
:hover ja :active saavat myös määritteet background-color: white, koska muutoin sääntö 1:n taustavärit periytyisivät niille.

<< Alkuun

Sääntö 3: 'luokka'

CSS-sääntö:

Seuraava sääntö kohdistuu vain elementtiin jolla on luokka this (class="this"). Periaate on sama kun yllä. Määrittely alkaa luokan nimellä, jonka jälkeen tulee välilyönti ja elementti johon sääntö vaikuttaa.

.this a:link, .this a:visited
{ color: #A52A2A; border: 2px solid #A52A2A}
.this a:hover
{ background-color: black; color: red; border: 2px groove red }
.this a:active
{ background-color: beige; color: #A52A2A; border: 2px groove #A52A2A }
Tulos:

<P class="this"> -kappale, jolla luokka this.
Sääntö 3:n mukainen linkki.
</P>

Selitys:

.this a:link ja .this a:visited värin ja laatikon määritys
.this a:hover taustaväri mustaksi, väri punaiseksi ja oma reunusmääritys
.this a:active taustaväri beige, väri tummanpunainen ja oma reunusmääritys

Huom!
Voit käyttää myös ID -tunnistetta. Se luodaan kuten luokka-tunnistekin, mutta määrittely alkaa risuaitamerkillä tyyliin:
#e2 a:link { color: skyblue}...

Määrittely toimii vain dokumentin siinä elementissä jolla on kyseinen id. Huomaa, että id on elementin yksilöllinen tunniste, joten se voi olla käytössä vain yhdellä elementillä. Elementin tunniste liitetään elementtiin seuraavasti:
<p id="e2">...</p>

<< Alkuun

Kaikki yhtä aikaa:

Tulos:

(Sääntö 3)

Linkki 1

Linkki 2

Linkki 3

Linkki 4

Linkki 5

Normaali kappale, normaali kappale, normaali kappale, normaali kappale, normaali Jossa linkki (Sääntö 1).

Normaali kappale Jossa linkki (Sääntö 1). Normaali kappale, jossa luokka this linkki (Sääntö 3).

  1. OL-lista
  2. (Sääntö 2 ) Lista ja linkki
  3. OL jatkuu
  4. (Sääntö 2+3) ol + this
Yhteenveto:

Jos haluat määrittää yhteen (x)HTML-dokumenttiin monta linkkimäärittelyä voit käyttää luokka-tunnistetta tai jälkeläisvalitsinta.

Huomaa, että a-elementille annetut määritteet periytyvät kaikille pseudo-elementeille, myös jälkeläisvalitsimille.

Hyviä jälkeläisvalitsin pareja ovat mm: (table a), (p a), (ul a) tai (ol a). Luokkaa ei välttämättä kannata kiinnittää suoraan <A> -elementtiin, vaan voit käyttää esim. <p>, <div>, <table> tai <span> elementtejä.

<< Alkuun

© Petteri Perälä 2001-2002.
E-mail: [ petepe@mbnet.fi ].