Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Selectorer i CSS

En vejledning i at bruge nogle grundlæggende selectorere i CSS.

Redigeret: 2012-04-04 14:05

Selectorer er regler i CSS som du angiver, der skal gælde for forskellige elementer på en side. En selector starter med ofte med et element navn, og vil så gælde for alle de elementer på en side, men man kan også angive klasser og unikke ids. Klasser bliver brugt til at gruppere elementer, og de unikke id må kun blive brugt en gang på en side.

Unikke id bliver ofte brugt af programmering på en side, for et eksempel til at finde bestemte elementer, eller linke til sektioner på en side. Klasser derimod, bliver mest anvendt til at stile elementerne på en side med. Klasser er nyttige hvis du har flere elementer, placeret forskellige steder, og ønsker at tilføje en bestemt indstilling til alle sammen, uden nødvendigvis at det skal have indflydelse på andre elementer af samme type.

Selectorer i CSS

En typisk selector i CSS ses nedenfor:

p {
 background: #000;
}

Her tilføjes en baggrund til alle p elementer på en side. Men normalt vil en web-designer ikke have at en indstilling skal gælde for alle elementer, ved at gøre tingene på denne måde, kan det også hurtigt blive svært at overskue, og vi risikere at "låse" stilen for elementer senere på siden. Derfor kan det være smart at anvende nogle klasser fra begyndelsen.

Klasser

For at en klasse skal virke, skal vi først tilføje en class attribut til de elementer vi ønsker den skal gælde for, som vist nedenfor.

<p class="MinKlasse">En helt masse eksempel tekst...</a></p>

Det er også muligt at tilføje flere klasser, det gøres ved at adskille dem med et mellemrum. Det kan være særligt nyttigt når man optimere sin CSS, for at den ikke skal fylde så meget. Du kan teste eksemplet nedenfor direkte i din browser.

<p class="MinKlasse MinAndenKlasse">En helt masse eksempel tekst...</a></p>
<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Min første Hjemmeside</title>
    <style type="text/css">
.MinKlasse {
  color: #0000ff;
}
.MinAndenKlasse {
  font-size: 5em;
}
    </style>
  </head>

  <body>
    <p class="MinKlasse MinAndenKlasse">Denne tekst skal stå med blå, og skal være ca 4 gange så stor som normalt.</p>
  </body>

</html>

Brugbart Syn!

Unikke Ids

De unikke ids angives med id attributten på HTML elementer, og kan refereres til ved brug af nummer symbolet (#).

<h1 id="Overskrift1">En helt masse eksempel tekst...</h1>
#Overskrift1 {
 font-weight: normal;
}