Introduktion till id och klasser - Versionshistorik

PGJ: /* Klasser */

2019-04-12T06:36:45Z

Klasser

← Äldre version		Versionen från 12 april 2019 kl. 06.36
Rad 40:		Rad 40:
	Ovanstående anger alltså att stycket tillhör två olika klasser. En med namnet <code>klassnamn1</code> och en med namnet <code>klassnamn2</code>.		Ovanstående anger alltså att stycket tillhör två olika klasser. En med namnet <code>klassnamn1</code> och en med namnet <code>klassnamn2</code>.

	För att ~~komma~~ ange CSS för de olika klasserna, gör vi i stort sett precis som tidigare, t.ex.:		För att ange CSS för de olika klasserna, gör vi i stort sett precis som tidigare, t.ex.:
	<codepen pen="PNJGXq" tab="css,result" height="250">		<codepen pen="PNJGXq" tab="css,result" height="250">
	</codepen>		</codepen>

PGJ: /* Unika klasser eller id */

2019-04-12T06:36:26Z

Unika klasser eller id

← Äldre version		Versionen från 12 april 2019 kl. 06.36
Rad 45:		Rad 45:

	== Unika klasser eller id ==		== Unika klasser eller id ==
	Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. ~~Det~~ är ~~dock~~ en ~~flexiblare~~ lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och ~~spara~~ på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa länkar som leder till en specifik position i ett dokument, med så kallade URL-fragment. I vissa fall kanske vi behöver ett id för att vi har [[JavaScript]]-kod som ska behandla ett specifikt element på något vis (i de flesta fall fungerar dock [[class\|klasser]] i dessa scenarier också).		Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. Detta är en flexibel lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och att man sparar på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa länkar som leder till en specifik position i ett dokument, med så kallade URL-fragment. I vissa fall kanske vi behöver ett id för att vi har [[JavaScript]]-kod som ska behandla ett specifikt element på något vis (i de flesta fall fungerar dock [[class\|klasser]] i dessa scenarier också).

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* Klasser */

2019-02-06T08:16:04Z

Klasser

← Äldre version		Versionen från 6 februari 2019 kl. 08.16
Rad 29:		Rad 29:

	För att välja ut element som tillhör en viss klass, kan man göra så här:		För att välja ut element som tillhör en viss klass, kan man göra så här:
	<codepen pen="EKwgdR" tab="css" height="250">		<codepen pen="EKwgdR" tab="css,result" height="250">
	</codepen>		</codepen>

Rad 41:		Rad 41:

	För att komma ange CSS för de olika klasserna, gör vi i stort sett precis som tidigare, t.ex.:		För att komma ange CSS för de olika klasserna, gör vi i stort sett precis som tidigare, t.ex.:
	<codepen pen="PNJGXq" tab="css" height="250">		<codepen pen="PNJGXq" tab="css,result" height="250">
	</codepen>		</codepen>

PGJ: /* id */

2019-02-06T08:15:47Z

← Äldre version		Versionen från 6 februari 2019 kl. 08.15
Rad 10:		Rad 10:

	Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:		Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:
	<codepen pen="YXvxjX" tab="css" height="200">		<codepen pen="YXvxjX" tab="css,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	#idnamn {		#idnamn {

PGJ: /* Klasser */

2019-01-13T13:14:21Z

Klasser

← Äldre version		Versionen från 13 januari 2019 kl. 13.14
Rad 25:		Rad 25:

	För att ange att ett HTML-[[element]] tillhör en viss [[class\|klass]] använder man sig av [[attribut]]et ”<code>class</code>”. Ett exempel på hur man anger detta:		För att ange att ett HTML-[[element]] tillhör en viss [[class\|klass]] använder man sig av [[attribut]]et ”<code>class</code>”. Ett exempel på hur man anger detta:
	<codepen pen="EKwgdR" tab="html" height="~~100~~">		<codepen pen="EKwgdR" tab="html" height="200">
	</codepen>		</codepen>

	För att välja ut element som tillhör en viss klass, kan man göra så här:		För att välja ut element som tillhör en viss klass, kan man göra så här:
	<codepen pen="EKwgdR" tab="css" height="~~150~~">		<codepen pen="EKwgdR" tab="css" height="250">
	</codepen>		</codepen>

Rad 35:		Rad 35:

	Man kan även ange att [[element]] ska tillhöra flera olika [[class\|klass]]er. Då anger man alla [[class\|klass]]erna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika [[klass]]erna med ett mellanslag. Ett exempel på hur detta kan se ut:		Man kan även ange att [[element]] ska tillhöra flera olika [[class\|klass]]er. Då anger man alla [[class\|klass]]erna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika [[klass]]erna med ett mellanslag. Ett exempel på hur detta kan se ut:
	<codepen pen="PNJGXq" tab="html" height="~~100~~">		<codepen pen="PNJGXq" tab="html" height="200">
	</codepen>		</codepen>

PGJ: /* id */

2019-01-13T13:13:58Z

← Äldre version		Versionen från 13 januari 2019 kl. 13.13
Rad 2:		Rad 2:
	== [[id]] ==		== [[id]] ==
	Om man vill adressera ett enda, specifikt [[element]] i en [[CSS-regel]], kan man använda sig av ett id. Detta är ett [[globala attribut\|globalt attribut]] som kan sättas för alla HTML-element. Ett id ska vara unikt och får bara förekomma en enda gång i varje HTML-dokument. För att tilldela ett id till ett HTML-element, skulle man kunna gör något i stil med detta:		Om man vill adressera ett enda, specifikt [[element]] i en [[CSS-regel]], kan man använda sig av ett id. Detta är ett [[globala attribut\|globalt attribut]] som kan sättas för alla HTML-element. Ett id ska vara unikt och får bara förekomma en enda gång i varje HTML-dokument. För att tilldela ett id till ett HTML-element, skulle man kunna gör något i stil med detta:
	<codepen pen="YXvxjX" tab="html" height="~~250~~">		<codepen pen="YXvxjX" tab="html" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<h1 id="idnamn">En rubrik med en id</h1>		<h1 id="idnamn">En rubrik med en id</h1>
Rad 10:		Rad 10:

	Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:		Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:
	<codepen pen="YXvxjX" tab="css" height="~~250~~">		<codepen pen="YXvxjX" tab="css" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	#idnamn {		#idnamn {

PGJ: /* id */

2019-01-13T13:13:41Z

← Äldre version		Versionen från 13 januari 2019 kl. 13.13
Rad 2:		Rad 2:
	== [[id]] ==		== [[id]] ==
	Om man vill adressera ett enda, specifikt [[element]] i en [[CSS-regel]], kan man använda sig av ett id. Detta är ett [[globala attribut\|globalt attribut]] som kan sättas för alla HTML-element. Ett id ska vara unikt och får bara förekomma en enda gång i varje HTML-dokument. För att tilldela ett id till ett HTML-element, skulle man kunna gör något i stil med detta:		Om man vill adressera ett enda, specifikt [[element]] i en [[CSS-regel]], kan man använda sig av ett id. Detta är ett [[globala attribut\|globalt attribut]] som kan sättas för alla HTML-element. Ett id ska vara unikt och får bara förekomma en enda gång i varje HTML-dokument. För att tilldela ett id till ett HTML-element, skulle man kunna gör något i stil med detta:
	<codepen pen="YXvxjX" tab="html" height="~~100~~">		<codepen pen="YXvxjX" tab="html" height="250">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<h1 id="idnamn">En rubrik med en id</h1>		<h1 id="idnamn">En rubrik med en id</h1>
Rad 10:		Rad 10:

	Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:		Vi kan använda id som selektor för att ange vilka CSS-regler som ska påverka ett element. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här:
	<codepen pen="YXvxjX" tab="css" height="~~150~~">		<codepen pen="YXvxjX" tab="css" height="250">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	#idnamn {		#idnamn {

PGJ: /* Unika klasser eller id */

2016-10-12T11:23:06Z

Unika klasser eller id

← Äldre version		Versionen från 12 oktober 2016 kl. 11.23
Rad 45:		Rad 45:

	== Unika klasser eller id ==		== Unika klasser eller id ==
	Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. Det är dock en flexiblare lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och spara på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa [[JavaScript]]-kod som ska behandla ~~dokumentet~~ på något vis (i de flesta fall fungerar [[class\|klasser]] i dessa scenarier också).		Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. Det är dock en flexiblare lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och spara på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa länkar som leder till en specifik position i ett dokument, med så kallade URL-fragment. I vissa fall kanske vi behöver ett id för att vi har [[JavaScript]]-kod som ska behandla ett specifikt element på något vis (i de flesta fall fungerar dock [[class\|klasser]] i dessa scenarier också).

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* Unika klasser eller id */

2016-10-12T11:20:56Z

Unika klasser eller id

← Äldre version		Versionen från 12 oktober 2016 kl. 11.20
Rad 44:		Rad 44:
	</codepen>		</codepen>

	=== Unika klasser eller id ===		== Unika klasser eller id ==
	Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. Det är dock en flexiblare lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och spara på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa [[JavaScript]]-kod som ska behandla dokumentet på något vis (i de flesta fall fungerar [[class\|klasser]] i dessa scenarier också).		Man kan självklart skapa en [[class\|klass]] som enbart används av ett enda [[element]]. I det fallet blir [[class\|klassen]] unik och fungerar i stort sett som ett [[id]]. Det är dock en flexiblare lösning, för om behovet uppstår så kan vi ju faktiskt lägga till [[class\|klassen]] till andra [[element]]. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av [[class\|klasser]] och spara på [[id]] till man verkligen behöver dem. Vilket kanske främst är när man ska skapa [[JavaScript]]-kod som ska behandla dokumentet på något vis (i de flesta fall fungerar [[class\|klasser]] i dessa scenarier också).

PGJ: /* Klasser */

2016-10-12T11:20:37Z

Klasser

← Äldre version		Versionen från 12 oktober 2016 kl. 11.20
Rad 22:		Rad 22:

	== [[class\|Klasser]] ==		== [[class\|Klasser]] ==
	[[class\|Klasser]] påminner om [[id]], men till skillnad mot [[id]] kan flera [[element]] tillhöra samma [[class\|klass]]. Det gör att man enkelt kan skapa [[CSS-regel\|CSS-regler]] som påverkar en hel drös av [[element]]. För att ange att ett HTML-[[element]] tillhör en viss [[class\|klass]] använder man sig av [[attribut]]et ”<code>class</code>”. Ett exempel på hur man anger detta:		[[class\|Klasser]] påminner om [[id]], men till skillnad mot [[id]] kan flera [[element]] tillhöra samma [[class\|klass]]. Det gör att man enkelt kan skapa [[CSS-regel\|CSS-regler]] som påverkar en hel drös av [[element]].

			För att ange att ett HTML-[[element]] tillhör en viss [[class\|klass]] använder man sig av [[attribut]]et ”<code>class</code>”. Ett exempel på hur man anger detta:
	<codepen pen="EKwgdR" tab="html" height="100">		<codepen pen="EKwgdR" tab="html" height="100">
	</codepen>		</codepen>
Rad 32:		Rad 34:
	Lägg märke till att klassnamnet föregås av en punkt. Detta talar om för CSS-tolken att det som följer efter punkten är ett klassnamn. Alla element som tillhör klassen <code>klassnamn</code> kommer att påverkas av CSS-regeln i exemplet.		Lägg märke till att klassnamnet föregås av en punkt. Detta talar om för CSS-tolken att det som följer efter punkten är ett klassnamn. Alla element som tillhör klassen <code>klassnamn</code> kommer att påverkas av CSS-regeln i exemplet.

	Man kan även ~~sätta~~ att ~~ett~~ [[element]] ska tillhöra flera olika [[class\|klass]]er. Då anger man alla [[class\|klass]]erna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika [[klass]]erna med ett mellanslag. Ett exempel på hur detta kan se ut:		Man kan även ange att [[element]] ska tillhöra flera olika [[class\|klass]]er. Då anger man alla [[class\|klass]]erna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika [[klass]]erna med ett mellanslag. Ett exempel på hur detta kan se ut:
	<codepen pen="PNJGXq" tab="html" height="100">		<codepen pen="PNJGXq" tab="html" height="100">
	</codepen>		</codepen>