Visa källa för Pseudoklasser och pseudoelement

== [[Pseudoklass]]er ==
[[Pseudoklass]]er 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 [[pseudoklass]]er.
<codepen pen="dojVQO" tab="css,result" height="250">
<syntaxhighlight lang="html5">
a:link {
  color: pink;
}

a:visited {
 color: green;
}
</syntaxhighlight>
</codepen>
Ovanstående två regler kommer att påverka textfärgerna på länkar. Den första, med ”<code>:link</code>”, 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 [[pseudoklass]]en ”<code>:hover</code>” alltid intressant. Den [[selektor]]n triggas när muspekaren befinner sig över [[element]]et och man kan på så sätt skapa diverse typer av interaktivitet. Vi kan 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 ”<code>:hover</code>” inte alltid fungerar bra på pekskärmar!

Vi kör ett exempel:
<codepen pen="xGJXmw" tab="css,result" height="250">
<syntaxhighlight lang="html5">
h1 {
  background-color: white;
}

h1:hover {
  background-color: lime;
}
</syntaxhighlight>
</codepen>

I grunden har <code>[[hx|h1]]</code>-elementen vit bakgrund. När du placerar din muspekare över ett <code>[[hx|h1]]</code>-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.

<div class="well-sm well-danger">
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 blinkande och kringstudsande är bara irriterande för dina slutanvändare.
</div>

Om man vill ha lite snyggare, mjukare övergång mellan färgerna, kan man använda sig av CSS-egenskapen <code>transition</code>. Så här skulle exemplet bli om vi använder den:
<codepen pen="VNWzJd" tab="css,result" height="275">
</codepen>
Vi anger alltså att övergången från den ena färgen till den andra ska ta en sekund. Det går att animera många olika typer av CSS-egenskaper på detta vis. Det finns även andra, mer kraftfulla,  metoder med vilka man kan skapa CSS-animationer, men det får vi återkomma till senare.

== [[Pseudoelement]] ==
Det finns även så kallade [[pseudoelement]]. Detta är innehåll 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:
<codepen pen="dojVaN" tab="css,result" height="200">
<syntaxhighlight lang="html5">
p::first-line {
  font-size: 200%;
}
</syntaxhighlight>
</codepen>
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.

<div class="well-sm well-meadow">
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 detta till dubbla. Återigen ett exempel på hur webbläsare är mycket förlåtande, även om man inte följer [[standard]]en till punkt och pricka. Det är dock inget man ska förlita sig på, utan följ alla [[standard]]er så gott det går!
</div>

== Nästa aktivitet ==
[[Elementtyper - inline och block]]

[[Category:Webbutveckling]]