Modul 3 · Kapitel 3.4

Klasser, id och selektorstrategi

Bra selektorer gör CSS lättare att läsa, återanvända och felsöka.

Mål

Efter kapitlet ska du kunna...

använda typ-, klass- och id-selektorer
gruppera och kedja selektorer
använda härstammande selektorer
förstå pseudoklasser och specificitet

Typselektor

Välj alla element av en typ

p {
  line-height: 1.5;
}

Det här stycket påverkas.

Även detta stycke påverkas.

Klassselektor

Återanvänd samma stil

<p class="intro-text">Text</p>

.intro-text {
  font-weight: 700;
}

Detta stycke har klassen intro-text.

Detta stycke saknar klassen.

Klassnamn

Punkt i CSS – inte i HTML

HTML	CSS
`class="intro-text"`	`.intro-text`

Använd gärna bindestreck i klassnamn.

Ett mellanslag betyder två separata klasser, inte ett långt klassnamn.

ID-selektor

Ett unikt element

<form id="contact-form">...</form>

#contact-form {
  border: 1px solid #5eead4;
}

Ett id ska normalt bara användas en gång per sida.

Välj klass när stilen ska återanvändas.

Var används id?

Mer än CSS

Ankarlänkar kan länka till ett id.
label for kopplas till ett fälts id.
JavaScript kan hitta ett element via id.
CSS kan välja id med #.

Gruppering

Samma regler för flera selektorer

h1,
h2,
h3 {
  line-height: 1.15;
}

Kommatecknen betyder att alla tre selektorer får deklarationen.

DRY

Don't Repeat Yourself

h1 { line-height: 1.15; }
h2 { line-height: 1.15; }
h3 { line-height: 1.15; }

h1, h2, h3 {
  line-height: 1.15;
}

Gruppering minskar upprepning.

Kedjeselektor

Elementet måste ha båda klasserna

<div class="card highlight">...</div>

.card.highlight {
  border-color: orange;
}

Detta element har både card och highlight.

Härstammande selektor

Välj element inuti ett annat

article p {
  max-width: 70ch;
}

Mellanslaget betyder: välj p-element som ligger någonstans inuti article.

70ch är en bredd på ungefär 70 nolltecken i den aktuella fonten.

max-width: 70ch

Ändra reglaget och se hur ch begränsar radens bredd. Ett lägre värde gör textkolumnen smalare och texten bryts över fler rader.

Skillnaden

Kedja eller härstamning?

`.card.highlight`	`article p`
Samma element har två klasser.	`p` ligger inuti `article`.
Inget mellanslag.	Mellanslag mellan selektorerna.

Pseudoklass

Välj ett tillstånd

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #5eead4;
}

:hover reagerar på muspekaren. :focus visar tangentbordsfokus.

Interaktiv pseudoklass

Hovra eller tabba

Hovra över länken eller använd Tab för att ge den fokus.

En tydlig fokusmarkering är viktig för tangentbordsnavigering.

Specificitet

Starkare selektor kan vinna

Typplägst

Klass.intro

ID#intro

Inlinestyle="..."stark

Specificitet och ordning

Två frågor avgör

Vilken selektor är mest specifik?
Om styrkan är lika: vilken regel står sist?

p { color: red !important; }

!important gör deklarationen starkare än vanliga deklarationer. Undvik det eftersom kaskaden blir svårare att förstå och senare regler ofta måste göras ännu starkare.

Interaktiv selektor

Se vad selektorn väljer

<p class="intro">Introtext</p>
<article>
  <p id="special">Första stycket</p>
  <p>Andra stycket</p>
</article>
<p>Vanligt stycke</p>

Välj en selektor

Rubrik

Introtext

Första stycket i article

Andra stycket i article

Vanligt stycke

Strategi

Håll selektorerna enkla

Använd typselektor för bred grundstil.
Använd klass för återanvändbara komponenter.
Använd id sparsamt och främst för unika kopplingar.
Undvik onödigt långa och starka selektorer.

Kontrollfråga

Vad väljer article p?

Alla article och alla p – eller bara p inuti article?

Svar: endast p-element som ligger inuti article.

Sammanfattning

Kom ihåg

Typselektorer väljer elementtyp.
Klasser återanvänds; id ska vara unikt.
Kommatecken grupperar selektorer.
Kedjor och härstamning betyder olika saker.
Pseudoklasser väljer tillstånd.
Specificitet och ordning avgör vilken regel som vinner.