CSS-vælgere

Indholdsfortegnelse

Vis indholdsfortegnelse

En CSS-vælger vælger det eller de HTML-elementer, du har ønsker at style.

CSS-vælgere

CSS-vælgere bruges til at "finde" (eller vælge) de HTML-elementer, du ønsker at style.

Vi kan opdele CSS-vælgere i fem kategorier:

Simple vælgere (vælg elementer baseret på navn, id, klasse)
Kombinatorvælgere (vælg elementer baseret på et specifikt forhold mellem dem)
Pseudo-klasse vælgere (vælg elementer baseret på en bestemt tilstand)
Pseudo-elementvælgere (vælg og style en del af et element)
Attributvælgere (vælg elementer baseret på en attribut eller attributværdi)

Denne side vil forklare de mest grundlæggende CSS-vælgere.

CSS-elementvælgeren

Elementvælgeren vælger HTML-elementer baseret på elementnavnet.

Eksempel

Her vil alle -elementer på siden være centreret, med en rød tekstfarve:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

CSS-id-vælgeren

Id-vælgeren bruger id-attributten for et HTML-element til at vælge et specifikt element.

Id'et for et element er unikt på en side, så id-vælgeren er det plejede vælg ét unikt element!

For at vælge et element med et specifikt id, skriv et hash-tegn (#) efterfulgt af elementets id.

Eksempel

CSS-reglen nedenfor vil blive anvendt på HTML-elementet med id="para1":

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Bemærk: Et id-navn kan ikke starte med et tal!

CSS-klassevælgeren

Klassevælgeren vælger HTML-elementer med en specifik klasseattribut.

For at vælge elementer med en bestemt klasse skal du skrive et punktum (.) efterfulgt af klassenavn.

Eksempel

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

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Du kan også angive, at kun specifikke HTML-elementer skal påvirkes af en klasse.

Eksempel

I dette eksempel vil kun -elementer med class="center" være rød og midtstillet:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

HTML-elementer kan også henvise til mere end én klasse.

Eksempel

I dette eksempel vil -elementet blive stylet i henhold til class="center" og til class="large":

<p class="center large">This paragraph refers to two classes.</p>

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

Bemærk: Et klassenavn kan ikke starte med et tal!

CSS Universal Selector

Den universelle vælger (*) vælger al HTML elementer på siden.

Eksempel

CSS-reglen nedenfor vil påvirke hvert HTML-element på siden:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

CSS-grupperingsvælgeren

Grupperingsvælgeren vælger alle HTML-elementer med samme stil definitioner.

Se på følgende CSS-kode (h1-, h2- og p-elementerne har det samme stildefinitioner):

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

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

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

Det vil være bedre at gruppere vælgerne for at minimere koden.

For at gruppere vælgere skal du adskille hver vælger med et komma.

Eksempel

I dette eksempel har vi grupperet vælgerne fra koden ovenfor:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Alle CSS Simple Selectors

Vælger:

#id

Eksempel:

#firstname

Eksempelbeskrivelse: Vælger elementet med id="fornavn"

Vælger:

.class

Eksempel:

.intro

Eksempelbeskrivelse: Vælger alle elementer med class="intro"

Vælger:

element.class

Eksempel:

p.intro

Eksempelbeskrivelse: Vælger kun elementer med class="intro"

Vælger:

Eksempel:

Eksempelbeskrivelse: Vælger alle elementer

Vælger:

element

Eksempel:

Eksempelbeskrivelse: Vælger alle -elementer

Vælger:

element,element,..

Eksempel:

div, p

Eksempelbeskrivelse: Vælger alle <div>-elementer og alle -elementer