Pseudo-element

Til vanleg blir dei ulike definisjonane i stilarket knytte til html-taggane ved at desse blir brukte som selektorar. Dette er som oftast også den enklaste og greiaste måten å bruke stilarket på for å omdefinere eigenskapane til html-taggane. Men på noen område kjem html til kort. Det finst for eksempel ikkje noen tagg for å definere første linja i eit avsnitt. Dermed er det heller ikkje råd å definere ein slik selektor direkte i CSS. Då er det pseudoelementa kjem til nytte i og med at desse kan definere eigenskapar for ein del taggar som ikkje finst i html (eller andre språk som bruker stilark).

Først eit oversyn over dei tilgjengelege pseudoelementa.

Bruk

Eit pseudoelement er alltid knytt til ein selektor. Altså slik

Eksempel: stilarket p:after { content: url(felles-css/smilefjes.gif); } vil setje smilefjeset etter alle avsnitta.

Og for dette avsnittet er det brukt p:first-letter { color: blue; font-size: 1.5em } (Ønskjer du nedfelt førstebokstav, sjå om dette i kapitlet om plassering). La du forresten merke til at bokstavane på den første linja var blitt til store bokstavar? Dette fordi eg i tillegg har lagt inn p:first-line { font-variant: small-caps; }.

Det er altså ikkje noe i vegen for å definere fleire pseudoeigenskapar for den same selektoren. I stilarket ser dette slik ut:

Eigentleg er det bare dei fire første eigenskapane i lista som er pseudoelement, resten er pseudoklassar. Dette skiljet er ikkje så viktig for den vanlege bruken, så eg køyrer desse saman.

first-child

Dette er det einaste pseudoelementet som formaterer andre element enn det det er definert i.

Stilarket

resulterer i denne utskrifta:

Dette er det første barnet av <span>-taggen.

Dette er det andre barnet av <span>-taggen.

Normalfargen for <h6> er grøn, men dersom <h6> er det første barnet av eit element, vil utskrifta ut frå definisjonen i stilarket bli blå. (Verkar ikkje i IE 6).

:lang

og slik i html-koden:

Utskrifta blir:

Dette kjem mellom norske hermeteikn.

Sidan eg bruker UTF-8 teiknsettet på desse sidene, måtte eg passe på å bruke dette teiknsettet også i stilarket).

:focus

Eit element som ventar på data frå tastaturet er i (eller har) «fokus». Pseudoklassen har difor bare verknad på element som tar i mot innskrivingsdata som t.d. form-element eller a-element i html.

Stilarket

Dersom du klikkar i ei av rutene ovanfor, vil ruta skifte farge for å vise at nå kan du skrive inn eit eller anna i ruta. (Ikkje i IE 6). Ruta har fokus. Klikkar du på ei anna rute, vil den første ruta miste fokus.

Grunnen til at det her er brukt outline her er at denne ikkje forandrar layouten, men legg seg utanpå dei andre elementa. Du slepp ei side som hoppar rundt etter som du klikkar.

Lenker

Pseudoklassane :link, :visited, :hover og :active blir mykje brukt til å formatere hyperlenker. For at dei ikkje skal øydelegge for kvarandre må dei definerast i den rekkefølgja dei er lista opp i her.

Reglane    Ei lenke    Ei lenke

Pseudoklassen :hover er ikkje avgrensa til a-elementet, men kan brukast t.d. på avsnitt, lister og meir. Prøv å halde musepeikaren over dette avsnittet.

Skjedde det ikkje noe? Heller ikkje denne kommandoen virkar i Internet Explorer 6.