CSS selektorer

CSS selektorer

CSS-väljare används för att 'hitta' (eller välja) HTML-element som ska ha sina stilar inställda.

Vi kan dela in CSS-väljare i fem kategorier:

Denna sida kommer att förklara de grundläggande CSS-väljarna.

CSS elementväljare

Elementväljare väljer HTML-element baserat på elementnamn.

Exempel

Här kommer alla <p>-element på sidan att centreras och ha röd textfärg:

p {
  text-align: center;
  color: red;
}

Prova själv

CSS-ID-väljare

ID-väljare använder HTML-elementets id-attribut för att välja ett specifikt element.

Elementets id är unikt på sidan, så används id-väljare för att välja ett unikt element!

För att välja element med ett specifikt id, skriv en pil (＃) efterföljd av elementets id.

Exempel

Detta CSS-regel tillämpas på HTML-elementet med id="para1":

#para1 {
  text-align: center;
  color: red;
}

Prova själv

Observera:ID-namn får inte börja med ett siffra.

CSS-klassväljare

Klassväljare väljer HTML-element med en specifik class-attribut.

För att välja element med en specifik class, skriv en punkt (.) efterföljd av klassnamnet.

Exempel

I detta exempel kommer alla HTML-element med class="center" att vara röda och centrerade:

.center {
  text-align: center;
  color: red;
}

Prova själv

Du kan också specificera att endast specifika HTML-element påverkas av klassen.

Exempel

I detta exempel kommer endast <p>-element med class="center" att centreras:

p.center {
  text-align: center;
  color: red;
}

Prova själv

HTML-element kan också referera till flera klasser.

Exempel

I detta exempel kommer <p>-elementet att ställas in efter class="center" och class="large":

<p class="center large">Denna paragraf refererar till två klasser.</p>

Prova själv

Observera:Klassnamn får inte börja med ett siffra!

CSS-allmän väljare

Allmän väljare (*) väljer alla HTML-element på sidan.

Exempel

Följande CSS-regler påverkar varje HTML-element på sidan:

* {
  text-align: center;
  color: blue;
}

Prova själv

CSS-grupperade väljare

Grupperade väljare väljer alla HTML-element med samma stildefiniering.

Se nedanstående CSS-kod (h1, h2 och p-element har samma stildefiniering):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Det är bäst att gruppera väljare för att minsta kodmängden.

För att gruppera väljare, använd kommatecken för att separera varje väljare.

Exempel

I detta exempel grupperar vi väljarna från ovanstående kod:

h1, h2, p {
  text-align: center;
  color: red;
}

Prova själv

Alla enkla CSS-väljare

Väljare Exempel Exempelbeskrivning
.class .intro Välj alla element med class="intro".
#id #förnamn Välj element med id="förnamn".
* * Välj alla element.
element p Välj alla <p>-element.
element,element,.. div, p Välj alla <div>-element och alla <p>-element.

Fortsätt läsa

Extra böcker:CSS elementväljare

Extra böcker:CSS väljargruppering

Extra böcker:CSS klassväljare detaljer

Extra böcker:CSS ID-väljare detaljer

Extra böcker:CSS egenskapsväljare detaljer

Extra böcker:CSS efterkommande väljare

Extra böcker:CSS underordnad elementväljare

Extra böcker:CSS närliggande brorsväljare