Id och class

Namnge html-element med id och class

Vare sig du vill styla ett helt område på hemsidan, eller två h2-rubriker på olika sätt så behöver du namnge dessa html-element. Det här gör vi med id och class, två värdefulla delar i webbdesign.

Div för att markera områden

Html-elementet <div> används för att markera områden på hemsidan, så som sidhuvud, boxar, menyer, sidfot med mera. Exempelvis såhär:

<div>
  <h1>Ett område på hemsidan</h1>
  <p>Det här området kommer vi att kunna styla senare i CSS</p>
</div>

Span för att markera text

Html-elementet <span> används för att markera texter på hemsidan som behöver stylas. Exempelvis såhär:

<span>Den här texten kan vi att kunna styla senare i CSS</span>

Id

Id används för att namnge ett element på hemsidan, det måste alltså vara unikt.
Det appliceras på html-element som följande.

<div id="uniktBlock">
  Jag är unik
</div>

Vi använder sedan en hashtag # i CSS’en för att styla området med valfria attribut.

#uniktBlock{

}

Class

Class är till för att namnge flera element på hemsidan, vilket passar bra om du har flera områden på hemsidan som ska tilldelas samma stiler.
Det appliceras på html-element som följande.

<div class="ettBlock">
  Jag är inte unik
</div>

<div class="ettBlock">
  Jag är inte unik
</div>

<div class="ettBlock">
  Jag är inte unik
</div>

Istället för en hashtag så använder vi här en punkt . för att styla classen.

.ettBlock{

}

Lägga till flera classer i en div

Om vi vill att alla divar ska se likadan ut förutom en, så funkar det utmärkt att lägga till classer i diven.

<div class="ettBlock specialerbjudande">
  Jag är speciell
</div>

<div class="ettBlock">
  Jag är inte speciell
</div>

<div class="ettBlock">
  Jag är inte speciell
</div>

Och i CSS’en skapar vi nu en specialstil till classen.

.ettBlock{

}

.specialerbjudande{

}

Understreck, bindestreck eller camelCase?

Som du har märkt använder vi inte mellanrum när vi namnger html-elementen, det beror på att man inte kan det helt enkelt. Istället kan man använda understreck, bindestreck eller så kallat camelCase när man skriver. Vi föredrar camelCase men det är en smaksak.

.ett_block{
  
}

.ett-block{
  
}

.ettBlock{
  
}

Scoping

Det är ibland svårt att veta vilken class som tillhör vart på hemsidan om man har ett tiotal classer. Det finns en enkel lösning på det, scoping. Man kan översätta det till avgränsning på svenska.

Scopa inom flera element

Om vi har en div som ligger inom en div, till exempel såhär:

<div class="sidhuvud">
  <div class="meny">
    Den här menyn kommer att påverkas
  </div>
</div>

<div class="meny">
  Den här menyn kommer inte att påverkas
</div>

Så kan du scopa det i CSS’en på det här viset och på så sätt hålla det sorterat.

.sidhuvud .meny{
  /* Den här kommer endast att påverka .meny som ligger inom .sidhuvud */
}

Stilen i .sidhuvud .meny kommer bara att påverka diven .meny som ligger inom .sidhuvud.

Scopa inom ett element

Om vi vill scopa inom ett element, till exempel styla en h2-rubrik som har classen .special och endast påverka alla h2 som finns på sidan med den classen, skriver vi precis som ovan fast utan mellanrummet.

<h2 class="special">Den här rubriken kommer att påverkas</h2>

<h3 class="special">Den här rubriken kommer inte att påverkas</h3>
h2.special{
  
}

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus