Välja Element på ett Enkelt Sätt

För att tillämpa stilar måste du ange vilka HTML-element CSS ska rikta in sig på. Detta görs med hjälp av selektorer. I detta kapitel fokuserar vi på de tre viktigaste selektorerna: taggselektorn, klass-selektorn och id-selektorn.

Taggselektor

En taggselektor riktar sig till alla element av en specifik HTML-tagg.
Exempel på HTML:

<p>It was all in my head.</p>

Exempel på CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Denna regel gäller för varje <p>-element på sidan.

Använd taggselektorer när du vill ha enhetlig formatering för alla element av den typen.

Klassväljare

En klassväljare riktar sig mot element som delar samma klassnamn.
HTML:

<p class="text">This song is another hit.</p>

I CSS refererar du till klassnamnet med en punkt (.) för att definiera stilarna:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Endast element med class="text" får dessa stilar.

Klassväljare är den mest använda typen av väljare i verkliga projekt eftersom de möjliggör flexibel och återanvändbar styling.

Flera klasser

Ett element kan ha mer än en klass.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Om ett element har båda klasserna får det stilar från båda väljarna.

Detta gör klassbaserad styling kraftfull.

<p>-elementet med både text och font klasserna får stilar från båda selektorerna. text-klassen sätter färgen till navy, och font-klassen sätter teckenstorleken till 24px.

ID-selektor

En ID-selektor riktar sig mot ett unikt element.

I HTML läggs ett id-attribut till ett element:

<p id="title">Choose from different themes.</p>

I CSS refereras ID:t med en hashtag (#) för att definiera stilar:

#title {
  font-weight: 500;
  font-size: 20px;
}

ID:n måste vara unika på en sida.

Även om ID:n kan användas för styling föredras klasser vanligtvis för konsekvens och återanvändbarhet.