1. Webdesign 101 forside
  2.  » CSS
  3.  » CSS under hjelmen

CSS pseudoklasser

Foruden de almindeligt kendte pseudoklasser, som jeg skrev om i artiklen Formatering af links, omfatter CSS-standarden en snes øvrige pseudoklasser, som er ganske nyttige.

I det følgende vil jeg nævne dem styk for styk i nogenlunde tilfældig orden.

Browserunderstøttelse

En stor del af de pseudoklasser, jeg skriver om i denne artikel, er CSS3-opfindelser. Det vil sige at de ikke endnu er officiel standard. Ikke desto mindre er browserunderstøttelsen god – undtagen (ja, du har gættet det) i Internet Explorer. Det gælder også for Internet Explorer 8, der er den nyeste browser fra Microsoft, mens jeg skriver dette. På dette område er IE8 kun en hårsbredde bedre end IE7 eller IE6 for den sags skyld. (Korrekt understøttelse af :active pseudoklassen er håret).

I spalten til højre finder du et par links til nogle oversigter i PDF. Disse oversigter viser, hvilke selektorer der understøttes i Safari 3 (Win/beta), Firefox 3.1 (beta), Opera 9, Internet Explorer 7 og Internet Explorer 9.

Det er nedslående læsning for så vidt angår de to sidstnævnte. Der er imidlertid hjælp at hente i Dean Edwards IE 7 JavaScript patch.

På denne hjemmeside finder du et link til et script, der får IE6/7 til at opføre sig som en standardoverholdende browser på en række vigtig punkter, blandt andet i understøttelsen af en del af de her omtalte CSS3 pseudoklasser.

De selektorer, der ikke eller kun mangelfuldt understøttes af Internet Explorer uden dette script er koloreret postkasserøde. Eller skrevet mere direkte: Hvis du ønsker at bruge postkasserøde pseudoklasser og kerer dig om funktionaliteten i Internet Explorer, skal du bruge den her beskrevne JavaScript patch (eller et andet serverside eller clientside script-library – jeg forestiller mig at en række af de moderne JavaScript API'er som Dojo, jQuery eller script.acoulo.us har funktioner, der modsvarer disse klasser).

DOM-træet

Det er vigtigt at forholde sig til, at de pseudoklasser, jeg skriver om i det følgende, beskriver et element i forhold til DOM-træet. Dette ser for en simpel side ud som i nedenstående figur:

DOM-træet er en beskrivelse af familieforholdende mellem HTML-elementerne på en webside.

I ovenstående figur er der fire elementer, der er børn af body-markøren, nemlig ét h1-element, to p-elementer og ét ol-element. Disse børn er søskende. Det første p-element er næstsøskende (eller nærmest søskende) til h1-elementet.

h1-elementet er parent til et em-element; det første p-element er parent til to (inline) elementer, nemlig em og strong; det andet p er parent til ét em-element, der igen er parent til ét a-element, der igen er parent til ét strong-element; ol-elementet har fire børn som er (og kun kan være) li-elementer; det tredje li-element er parent til et ul-element, der har tre børn.

First-child og last-child pseudoklasserne

Element:first-child matcher det element, der er det første barn af et forældreelement.

Element:last-child matcher det element, der er det sidste barn af et forældreelement.

ul.zmenu li:first-child {color:maroon;}
ul.zmenu li:last-child {color:teal;}

Ovenstående matcher den hhv. den første li og den sidste li i en ordnet (ol) eller uordnet (ul) liste, jf. nedenstående eksempel. Her er tale om en ordnet liste, der er indlejret i det 2. listepunkt af en uordnet liste. Her vises det første listepunkt i hver af listerne med rødbrun skrift og det sidste listepunkt i hver af listerne med blågrøn skrift.

  • Menupunkt 1
  • Menupunkt 2
    1. Menupunkt 2.1
    2. Menupunkt 2.2
    3. Menupunkt 2.3
  • Menupunkt 3
  • Menupunkt 4
  • Menupunkt 5

Det er værd at bemærke at eksemplet ikke vil matche det første barn af li-elementet, hvis der var et sådant. Det kan der jo meget vel være, fordi mange lister er menuer, hvor li'erne har et indhold links (a-markører). En kvikfix for dette er li>*:first-child.

Only-child pseudoklassen

Element:only-child matcher et element der er det eneste afkom af et andet element.

address:only-child {font-style:normal;}

Eksemplet vil vise tekstindholdet af address-markøren med normal skrift, hvis address-elementet er det eneste element i en sidefod.

nth-Child pseudoklasser

Dem er der fire af, nemlig

Element:nth-child(N), 
Element:nth-last-child(N), 
Element:nth-of-type(N) og 
Element:nth-last-of-type(N)

hvor N i alle fire tilfælde kan være et nøgleord, et tal eller et udtryk (Expression).

(Bemærk at de to sidstnævne ikke på nogen måde understøttes af Internet Explorer).

Nøgleordene kan være even (lige) eller odd (ulige). tr:nth-child(odd) vil således vælge rækker med ulige numre hvis man tæller rækker fra oven, mens tr:nth-last-child(even) vil vælge alle rækker med lige numre, hvis man tæller rækker fra neden. #menu li:nth-of-type(even) vil vælge alle li-elementer i elementet #menu som har lige numre, hvis man tæller elementer fra oven.

Tallene er heltal, så #indhold p:nth-child(5) matcher det femte tekstafsnit i #indhold-elementet, mens p:nth-last-child(1) og p:nth-last-of-type(1) er ét og samme, nemlig det sidste p-element på websiden og således substituerer p:last-child pseudoklassen. Effekten af disse to pseudoklasser er i virkeligheden at mens p:last-child ufravigeligt er det sidste tekstafsnit på websiden, så giver p:nth-last-child(2) os mulighed for at matche det næstsidste element på websiden.

Det er vigtigt her at holde sig for øje at nth-child og nth-of-type tæller elementerne fra oven af og nth-last-child og nth-last-of-type tæller fra neden af. Samt at N er den position et element indtager i en serie af ensartede elementer på websiden.

N kan også være et udtryk på formen an + b hvor a og b er heltal, hvor b repræsenterer positionen og a repræsenterer hvilke elementer der derefter skal matches. p:nth-of-type(3n+1) vil således matche det første tekstafsnit og hvert tredje tekstafsnit efter dette, mens p:nth-last-of-type(3n+1) vil matche det sidste tekstafsnit og hvert tredje tekstafsnit før dette.

Efter at jeg lige nævner at både a og b kan have negative værdier vil jeg trygt overlade til min læser at eksperimentere med disse udtryk. I teorien er disse pseudoklasser utroligt effektive. Humlen er blot at mens disse pseudoklasser understøttes af de fleste moderne browsere, er der ingen nuværende versioner af den browser, der er fleste af, der understøtter dem. Heller ikke IE8. Tjek dog lige afsnittet Browserunderstøttelse herover.

:target-pseudoklassen

Element:target matcher et element, der er målet for et bogmærkelink. Et bogmærkelink er et havelågetegn (hash, #) efterfulgt af en id for et element på siden.

Nytten af denne pseudoklasse lader sig måske bedst dokumentere med et eksempel: linket i slutningen af foregående afsnit til overskriften Browserunderstøttelse er et bogmærkelink. Klikker du på det, indlæses siden påny med denne overskrift i toppen af siden.

Det er denne overskrift, der er target, og den lader sig derfor formatere ved hjælp af denne pseudoklasse:

h3#support:target {
  background-color:black;
  color:white;}

Humlen ved denne løsning er, at den er persistent, som det hedder på engelsk. Det er en formatering, der ganske modsvares af den mere simple selektor h3#support. Det vil sige at farveskemaet for overskriften altid anvendes, i de browsere, der understøtter denne selektor.

Det er imidlertid ikke det du ser, når du tester mit eksempel. I mit stylesheet for denne side er indsat følgende:

h3#support:target {
  background-image:url(/www/res/yellow-fade.gif);}

yellow-fade.gif er animeret gif, der starter som gul og fader over i transparent. Det har den følge, at overskriften vises med en gul baggrund, der i løbet af et par sekunder fader ud og bliver usynlig.

Dette trick har jeg fundet på webstedet thinkvitamin.com og har skamløst kopieret den animerede gif. Det er mindst ti år siden jeg selv har lavet en af slagsen. For dette ene eksempels skyld har jeg ikke tænkt mig at begynde igen. Det er nok også lige så længe siden jeg har set en fornuftig anvendelse af et sådant element.

På samme websted kan du også finde en anvendelse af :target-pseudoklassen til at lave et lidt primitivt faneblads navigationsystem.

Fanebladsnavigation med :target-atributten

Fanebladsnavigation

Den operative del af stylesheet har følgende udseende:

.box {
  margin:0;
  display:none;
  clear:left;
  background:white;
  border-width: 0 1px 1px 1px;
  border-style:solid;
  border-color:#257;
  width:669px;
  padding:16px;}
div.box:target {
  display: block;}
:target div.box {
  display: block;}
:target div.box + div.box{
  display: none;}

:Empty og :not(S)

Element:empty matcher elementer, der ikke har noget indhold.

:not(S) matcher elementer, der ikke har noget indhold.


November 2009