Pseudoklasser och pseudoelement - Versionshistorik

PGJ: /* Pseudoklasser */

2019-04-12T06:52:23Z

Pseudoklasser

← Äldre version		Versionen från 12 april 2019 kl. 06.52
Rad 38:		Rad 38:
	<codepen pen="VNWzJd" tab="css,result" height="275">		<codepen pen="VNWzJd" tab="css,result" height="275">
	</codepen>		</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 mer kraftfulla ~~sätt på~~ vilka man kan skapa CSS-animationer, men det får vi återkomma till senare.		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]] ==

PGJ: /* Pseudoklasser */

2019-04-12T06:51:18Z

Pseudoklasser

← Äldre version		Versionen från 12 april 2019 kl. 06.51
Rad 36:		Rad 36:

	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:		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="~~250~~">		<codepen pen="VNWzJd" tab="css,result" height="275">
	</codepen>		</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 mer kraftfulla sätt på vilka man kan skapa CSS-animationer, men det får vi återkomma till senare.		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 mer kraftfulla sätt på vilka man kan skapa CSS-animationer, men det får vi återkomma till senare.

PGJ: /* Pseudoklasser */

2019-04-12T06:51:00Z

Pseudoklasser

← Äldre version		Versionen från 12 april 2019 kl. 06.51
Rad 34:		Rad 34:
	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.		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>		</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="250">
			</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 mer kraftfulla sätt på vilka man kan skapa CSS-animationer, men det får vi återkomma till senare.

	== [[Pseudoelement]] ==		== [[Pseudoelement]] ==

PGJ: /* Pseudoklasser */

2019-04-12T06:47:09Z

Pseudoklasser

← Äldre version		Versionen från 12 april 2019 kl. 06.47
Rad 14:		Rad 14:
	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.		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 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 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:		Vi kör ett exempel:

PGJ: /* Pseudoelement */

2019-01-13T13:22:30Z

Pseudoelement

← Äldre version		Versionen från 13 januari 2019 kl. 13.22
Rad 37:		Rad 37:
	== [[Pseudoelement]] ==		== [[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:		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" height="~~150~~">		<codepen pen="dojVaN" tab="css,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	p::first-line {		p::first-line {

PGJ: /* Pseudoklasser */

2019-01-13T13:22:12Z

Pseudoklasser

← Äldre version		Versionen från 13 januari 2019 kl. 13.22
Rad 17:		Rad 17:

	Vi kör ett exempel:		Vi kör ett exempel:
	<codepen pen="xGJXmw" tab="css" height="~~200~~">		<codepen pen="xGJXmw" tab="css,result" height="250">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	h1 {		h1 {

PGJ: /* Pseudoklasser */

2019-01-13T13:21:47Z

Pseudoklasser

← Äldre version		Versionen från 13 januari 2019 kl. 13.21
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="~~300~~">		<codepen pen="dojVQO" tab="css,result" height="250">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	a:link {		a:link {

PGJ: /* Pseudoklasser */

2019-01-13T13:21:36Z

Pseudoklasser

← Äldre version		Versionen från 13 januari 2019 kl. 13.21
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" height="~~200~~">		<codepen pen="dojVQO" tab="css,result" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	a:link {		a:link {

PGJ: /* Pseudoelement */

2016-10-19T11:04:50Z

Pseudoelement

← Äldre version		Versionen från 19 oktober 2016 kl. 11.04
Rad 44:		Rad 44:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</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.		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">		<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 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!		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>		</div>

PGJ: /* Pseudoelement */

2016-10-19T10:51:56Z

Pseudoelement

← Äldre version		Versionen från 19 oktober 2016 kl. 10.51
Rad 46:		Rad 46:
	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.		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 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!		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 [[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 ==		== Nästa aktivitet ==