Lektioner

Pseudoelement och pseudoklasser i CSS

Klasser och element som du inte har skrivit

Pseudo betyder ju att något är falskt, inte riktigt riktigt, fejk. Alltså är en pseudoklass inte en vanlig klass som du skriver in i en tagg med attributet class, den bara finns där ändå, utan att du behöver göra någonting. En pseudoklass beskriver ett tillstånd ett element är i. Ett bra exempel är till exempel :hover som gäller om muspekaren befinner sig ovanför elementet eller :active, som gäller när användaren klickar på elementet.

Pseudoelement är liknande, men handlar om var ett element befinner sig i koden. ett exempel är ::after som kommer att gälla för det element som är kommer efter elementet som tilldelats pseudoelementet.

För att markera att det du sḱriver i din CSS är ett pseudoelement, eller en pseudoklass använder du kolon (:) på samma sätt som du använder punkt (.) för att markera en klass eller nummertecken (#) för att markera ett id.

I äldre CSS-versioner användes ett enkelt kolon (:) för att markera både pseudoelement och pseudoklasser. I CSS3 har systemet med pseudoklasser och -element byggts ut en hel del, så man har valt att skilja pseudoklasser och pseudoelement åt genom att använda dubbla kolon (::) för att markera pseudoelement och enkla (:) för pseudoklasser.

Tidigare gällde alltid enkla (:). Detta innebär att även felskrivningar ofta fungerar i webbläsare, men eftersom det är ändrat, och nya pseudoelement och -klasser tillkommit så är det alltid säkrast att hålla sig till korrekt CSS3-syntax och skilja på : och ::

Det finns läsa om hos W3C. Det finns massor, som jag inte går in i detalj på i den här texten.

För att märka ut att det är frågan om en pseudoklass använder man ett vanligt kolon (:) i sin CSS-väljare på samma sätt du avänder en punkt, när det är frågan om en vanlig klass.

Några exempel på tilllämpning av pseudoklasser

a:link {}
En länk som är obesökt
a:visited{}
En besökt länk
a:hover {}
En länk, när markören är över den
a:active {}
En länk, när den klickas

Exempel på pseudoelement

::first-line
Den första raden text
::first-letter
Den första bokstaven eller siffran
::before
Gäller för det som kommer före det aktuella elementet
::after
Gäller för det som kommer efter det aktuella elementet

Naturligtvis kan du använda dig av ovanståenda pseudoklasser till vilket element du vill, även om de passar bra till just <a>. Du kan också, precis som när det gäller vanliga klasser och id, använda dig av bara en pseudoklass som väljare. Du kan läsa mer om kombinerade väljare här.

du kan läsa mer hos W3C eller testa på W3Schools (artikeln innan den handlar om pseudoklasser).

Uppgift

Z-index, pseudoklasser och synlighet

Skapa en ny mapp (katalog), med namnet cssuppgift-1.

Skapa i denna en ny index.html och en tillhörande stilmall (css).

Dokumentet ska vara utformat efter följande:

  • Skapa tre delvis överlappande lådor med olika bakgrundsfärg. Skriv minst ett skrivtecken, gärna mer, i varje låda (för att vara säker på att de renderas)
  • Låt den låda som ligger i mitten i HTML-koden ligga överst av de tre
  • Låt den låda som ligger först i HTML-koden byta färg och hamna överst när muspekaren befinner sig över den
  • Försök få en av lådorna att försvinna när muspekaren befinner sig över den.
  • Skriv i din HTML, en kommentar där du förklarar din lösning
  • OM din lösning inte fungerar förklarar du i kommentaren varför den inte fungerar

Ladda upp mappen cssuppgift-1 till ditt konto. Länka till denna från din startsida.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.