Introduktion till id och klasser: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) (→id) |
PGJ (diskussion | bidrag) |
||
| (18 mellanliggande sidversioner av samma användare visas inte) | |||
| 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=" | <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=" | <codepen pen="YXvxjX" tab="css,result" height="200"> | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
#idnamn { | #idnamn { | ||
| 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]] | [[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="200"> | |||
</codepen> | |||
< | 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,result" height="250"> | |||
</ | </codepen> | ||
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 | 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="200"> | |||
</codepen> | |||
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 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> | |||
</ | |||
== 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]]. 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 == | ||
[[ | [[Turordningsregler för CSS]] | ||
[[Category:Webbutveckling]] | [[Category:Webbutveckling]] | ||
Nuvarande version från 12 april 2019 kl. 08.36
För att på ett bättre sätt kunna styra exakt vilka element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även användas för att adressera element ifrån JavaScript-kod. I fallet med id, så kan det även användas för att adressera fragment i webbsidor.
id
Om man vill adressera ett enda, specifikt element i en CSS-regel, kan man använda sig av ett id. Detta är ett 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:
Ovanstående kopplar id:et "idnamn" till denna specifika rubrik och kan alltså användas för att välja ut just detta h1-element.
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:
Lägg märke till att id-namnet föregås av ett "#"-tecken. Detta indikerar för CSS-tolken att det som följer efter är ett id-namn. I exemplet väljer vi alltså ut det element som har id:t ”idnamn” och sätter dess förgrundsfärg till blå. På så vis kan man styra specifikt utseende på enskilda, utvalda element.
Vad gäller id, så är det många som tycker att man ska undvika dem så långt som möjligt. Anledningen till detta är att de är för specifika, då de bara inriktar sig på ett enda unikt element. Vad händer då om man vill ha samma egenskaps-förändringar på två element, eller kanske ännu fler. Ska man skapa ett id för varje? Nej, här finns en bättre lösning och det är klasser.
Klasser
Klasser påminner om id, men till skillnad mot id kan flera element tillhöra samma klass. Det gör att man enkelt kan skapa CSS-regler som påverkar en hel drös av element.
För att ange att ett HTML-element tillhör en viss klass använder man sig av attributet ”class”. Ett exempel på hur man anger detta:
För att välja ut element som tillhör en viss klass, kan man göra så här:
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 klassnamn kommer att påverkas av CSS-regeln i exemplet.
Man kan även ange att element ska tillhöra flera olika klasser. Då anger man alla klasserna i ett och samma ”class”-attribut, men man särskiljer de olika klasserna med ett mellanslag. Ett exempel på hur detta kan se ut:
Ovanstående anger alltså att stycket tillhör två olika klasser. En med namnet klassnamn1 och en med namnet klassnamn2.
För att ange CSS för de olika klasserna, gör vi i stort sett precis som tidigare, t.ex.:
Unika klasser eller id
Man kan självklart skapa en klass som enbart används av ett enda element. I det fallet blir 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 klassen till andra element. På grund av detta förespråkar många att man nästan uteslutande ska använda sig av 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 klasser i dessa scenarier också).