Pseudoklasser och pseudoelement

Pseudoklasser

Pseudoklasser kan användas för att välja ut specifika element, beroende på vissa förhållanden. Ett bra exempel på detta är länkar. Som du säkert sett på många sidor, så kan länkar ha en färg när du inte besökt dem och en annan om du redan besökt den länkade resursen. De här egenskaperna kan vi komma åt och styra med hjälp av pseudoklasser.

a:link {
  color: pink;
}

a:visited {
 color: green;
}

Ovanstående två regler kommer att påverka textfärgerna på alla länkar. Den första, med ”:link”, kommer att sätta alla icke-besökta länkar till rosa, medan den andra regeln kommer att sätta de besökta länkarna till grönt.

Om du vill ha lite roligt så är pseudoklassen ”:hover” alltid intressant. Den selektorn triggas när muspekaren befinner sig över elementet och man kan på så sätt skapa diverse typer av interaktivitet. Vi alltså få diverse saker att hända när musen rör sig kors och tvärs vår webbsida. Många typer av meny-system använder sig av detta, men kom ihåg att ”:hover” inte fungerar bra på pekskärmar! Vi kör ett exempel:

h1 {
  background-color: white;
}

h1:hover {
  background-color: lime;
}

I grunden har h1-elementen vit bakgrund. När du placerar din muspekare över ett h1-element, kommer dess bakgrundsfärg att ändras till lime-grönt och så fort du för bort muspekaren, kommer den att ändra tillbaka till den vita grundfärgen.

Förutom att det inte fungerar så bra på pekskärmar, så kan det vara rätt så irriterande om man har alltför mycket funktionalitet som hoppar hit och dit beroende på var muspekaren befinner sig. Så använd dessa effekter med måtta! Alltför mycket hoppande och studsande är bara irriterande för dina slutanvändare.

Pseudoelement

Det finns även så kallade pseudoelement. Detta är inte element som vi skapar, utan istället är det saker som har egenskaper som gör att de kan ses som element. Det kan t.ex. vara första raden i ett stycke. För att göra ett sånt urval skulle du kunna skapa följande regel:

p::first-line {
  font-size: 200%;
}

Med den regeln, skulle första raden i alla stycken bli dubbelt så hög, medan efterföljande rader skulle återges med ”normal” text-storlek.

Lägg märke till att pseudoelement anges med dubbla kolon. Alla webbläsare stödjer dock att man använder enkelkolon också. Det är en kvarleva från att CSS-standarden först angav att det skulle vara enkelkolon, men sen ändrades till dubbla. Återigen ett exempel på hur webbläsare är mycket förlåtande, även om man inte följer standarden till punkt och pricka. Det är dock inget man ska förlita sig på, utan följ alla standarder så gott det går!

Nästa aktivitet: Elementtyper - inline och block