Pseudo-klasser er CSS-mest fascinerende funksjoner. Du kan få utrettet så utrolig mye med de, det er bare synd at det er veldig dårlig støtte for disse i de fleste nettlesere. Vi finner best støtte av pseudo i følgende nettlesere: Safari, Mozilla Firefox og delvis Opera. IE 6 har nesten ingen støtte, mens IE 7, har noe mer.
Jeg kommer til å gi en kjapp innføring av de forskjellige pseudoene. Det jeg vil gjøre er å ha en liste med navn, uthevd i bold, og så en liten forklaring. Noen, de jeg finner mest interessant, får et lite eksempel helt på bunnen. Listen vil bli slik som dette:
navn » (Eks bruk:) element.klasse:pseudo » Forklaring
Her kommer listen, starter med de med best støtte.
- Hover, active, visited, link » a.postlinks:hover » Disse er de vanligste pseudo-klassene. De blir brukt til å lage forskjellig stil på linker, selv om de i overnevnte nettlesere fungerer på andre elementer enn a. I IE 6 har de kun støtte i a. Hover blir brukt når musen er over linken. Active er når du har trykt på siden, før du har lastet til ny side, eller det er en pop-up. Visited er på de som er besøkt. Link er på vanlige linker, altså ikke med hover, active eller visited. Det er ofte god skikk å skille fra visited til link. Link, visited og active er ment til a-elementet.
- First-line, first-letter » p.postinfo:first-letter » Denne er veldig selvforklarende. first-line er brukt til den første linjen av en tekst, gjerne i paragraf, siden det er paragrafer som skal inneholde tekststykke. Når det blir neste linje, selv om du ikke bruker noe braker, vil ikke dette gjelde. First-letter sier seg også selv. Det gjelder kun for den første bokstaven. Den er genial til å f.eks gjøre slik som i bøker, der første bokstav er veldig stor, og de andre er normale.
- Focus » textarea.commentField:focus » Denne brukes i sammenheng med forms og gjelder når du har trykt og fokuset er på input/textarea. Når du trykker på feltet og skal skrive i det, kommer det f.eks en annen farge eller lignende.
- Before, after » h1.header:after » Om noen husker mitt gamle tema til denne bloggen og har sett den i forskjellige nettlesere kunne du noen gang se «.. Mikael Brevik ..» og andre ganger kun Mikael Brevik. Der har du before og after. Det legger til innhold før teksten i elementet og etter. I denne sammenhengen bruker du gjerne egenskapen content som legger til innhold. Eks.
content: " ...";. Before er før og after er etter - logisk nok. - First-child, last-child » li.navigation:last-child » Denne er genial å bruke i eksempelvis navigasjoner. Har vi ikke alle hatt problemer med at du vil skille navelementene med en border og legger den til høyre, men vi vil ikke ha det på siste element. Da må vi til med en egen klasse for den som fjerner rammen. Med denne trenger du ikke det, og vi slipper å klure i markupen. First-child er altså det første elementet under parent, og last-child er det siste. F.eks antall paragrafer i en divisjon eller da liste elementer i en ul.
- Only-child » p.info:only-child » Her har vi nok en selvforklarende pseudo. Denne gjelder kun om p.info er den eneste child av en parent. Om du har kun en p inne i en divisjon, og har denne så vil det gjelde den!
- Empty » div.gallery:empty » Genial å bruke for å vise til f.eks en feilmelding. Om det skal være innhold der som du tar ut fra f.eks en database, men det kommer ikke ut (ja kanskje et galleri) så kan du gjøre noe spesiell styling med denne.
- Root » :root » Ser den følger ikke helt strukturen. Denne trenger nok litt forklaring også, selv om den er temmelig logisk. Den velger altså den ytterste elementet bak alle ellement og blokker. Start tag-en med andre ord. Det er altså i HTML tagen
html. Den kan du bruke til.. Ingen aning hva nytteverdien er. Du kan like greit bruke html { /*style */ } spør du meg. Men den har sikkert en dypere mening som jeg ikke har oppdaget. - Not » p.newsText *:not(code) » Denne velger å ha stylingen på alle elementer inne i .newsText men ikke på code-tagen. Dette er en av de mest avanserte pseudo-klassene spør du meg. * er alt som vi vet.
- Target » p.newsText:target » Her har vi nok en genial pseudo-klasse fra CSS2! Denne gjelder på alle klasser som har id lik det som er oppgitt i url. Du har f.eks en klasse med id=”database” og linken www.domene.no/#database. Da vil stylingen gjelde for det elementet som har den id-en. Genial for highlighting?? Ja.
- Selection » p.postinfo::target » Hehe, må le. Denne er fiffig rett og slett. Denne styler du markeringen av tekst på. Om du har en paragraf med klassen postinfo og noen merker teksten som står der, kan du style hvordan markeringen vil se ut. Rett og slett genialt, men unyttig?
Der har vi det. En kjapp gjennomgang av pseudo-klasser. Nå ser jeg på klokken og vet jeg skal ha en stor nynorskprøve i morgen. Derfor kan jeg komme tilbake til eksempler senere en dag.
Håper dere setter dere ned og prøver ut de forskjellige pseudo-klassene, og om dere gjør - bruk Safari eller Firefox, som har den beste støtten. Safari har som jeg har sett best støtte, og støtte for alt ovenfor! Dette blir fremtiden i alle nettlesere dere, det håper jeg i alle fall.
God natt og lykke til!