Pseudoklasser och pseudoelement: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| (18 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
== [[Pseudoklass]]er == | == [[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. | [[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"> | <syntaxhighlight lang="html5"> | ||
a:link { | a:link { | ||
| Rad 11: | Rad 11: | ||
} | } | ||
</syntaxhighlight> | </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! | |||
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 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 fungerar bra på pekskärmar! | |||
Vi kör ett exempel: | |||
<codepen pen="xGJXmw" tab="css,result" height="250"> | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
h1 { | h1 { | ||
| Rad 25: | Rad 27: | ||
} | } | ||
</syntaxhighlight> | </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]] == | == [[Pseudoelement]] == | ||
Det finns även så kallade [[pseudoelement]]. Detta är | 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"> | <syntaxhighlight lang="html5"> | ||
p::first-line { | p::first-line { | ||
| Rad 40: | Rad 48: | ||
} | } | ||
</syntaxhighlight> | </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]] | |||
Nuvarande version från 12 april 2019 kl. 08.52
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.
Ovanstående två regler kommer att påverka textfärgerna på 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 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 ”:hover” inte alltid fungerar bra på pekskärmar!
Vi kör ett exempel:
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 blinkande och kringstudsande är bara irriterande för dina slutanvändare.
Om man vill ha lite snyggare, mjukare övergång mellan färgerna, kan man använda sig av CSS-egenskapen transition. Så här skulle exemplet bli om vi använder den:
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:
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 detta 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!