CSS Vælger

CSS Vælger

CSS-selektorer bruges til at 'finde' (eller vælge) HTML-elementer, der skal have deres stil indstillet.

Vi kan opdele CSS-selektorer i fem kategorier:

Denne side forklarer de grundlæggende CSS-selektorer.

CSS elementvælger

Elementselektoren vælger HTML-elementer baseret på elementnavnet.

Eksempel

Her vil alle <p>-elementer på siden blive centreret og have rød tekstfarve:

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

Prøv det selv

CSS ID-selektor

ID-selektoren bruger HTML-elementets id-attribut til at vælge et specifikt element.

Elementets id er unikt på siden, så id-selektoren bruges til at vælge et unikt element!

For at vælge et element med et bestemt id, skriv en streg (＃) efterfulgt af elementets id.

Eksempel

Dette CSS-regel anvendes på HTML-elementet med id="para1":

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

Prøv det selv

Bemærk:ID-navnet må ikke starte med et tal.

CSS klasseselektor

Klasseselektoren vælger HTML-elementer med en bestemt class-attribut.

For at vælge elementer med en bestemt klasse, skriv en punktum (.) efterfulgt af klassenavnet.

Eksempel

I dette eksempel vil alle HTML-elementer med class="center" være røde og centreret:

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

Prøv det selv

Du kan også specificere, at kun specifikke HTML-elementer påvirkes af klassen.

Eksempel

I dette eksempel vil kun <p>-elementer med class="center" være centreret:

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

Prøv det selv

HTML-elementer kan også referere til flere klasser.

Eksempel

I dette eksempel vil <p>-elementet blive stillet op efter class="center" og class="large":

<p class="center large">Denne afsnit refererer til to klasser.</p>

Prøv det selv

Bemærk:Klassenavn må ikke starte med et tal!

CSS generel vælger

Generel vælger (*), vælger alle HTML-elementer på siden.

Eksempel

Nedenstående CSS-regler påvirker alle HTML-elementer på siden:

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

Prøv det selv

CSS grupperede vælger

Grupperede vælger vælger alle HTML-elementer med samme stildefinering.

Se nedenstående CSS-kode (h1, h2 og p-elementer har samme stildefinering):

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

Det er godt at gruppere vælger, for at minimere koden mest muligt.

For at gruppere vælger, adskil hver vælger med komma.

Eksempel

I dette eksempel grupperer vi vælgerne fra ovenstående kode:

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

Prøv det selv

Alle enkle CSS vælger

Vælger Eksempel Eksempelbeskrivelse
.class .intro Vælg alle elementer med class="intro".
#id #firstname Vælg det element med id="firstname".
* * Vælg alle elementer.
element p Vælg alle <p> elementer.
element,element,.. div, p Vælg alle <div> elementer og alle <p> elementer.

Udvidet læsning

Fagbog:CSS elementvælger

Fagbog:CSS vælgergruppering

Fagbog:CSS klassenvælger detaljeret

Fagbog:CSS ID vælger detaljeret

Fagbog:CSS egenskabsvælger detaljeret

Fagbog:CSS efterkommervælger

Fagbog:CSS underelementsælger

Fagbog:CSS næstebrorvælger