Grundlæggende CSS: Valg af elementer, ID og Class

I CSS kan du vælge elementer, class og id for at anvende stilarter og tilpasse elementer på din webside. Her er en detaljeret guide til, hvordan du bruger dem:

 

Valg af elementer

For at vælge alle forekomster af et specifikt HTML-element skal du bruge elementnavnet som en vælger. p Vælger f.eks. alle <p> tags i dokumentet.

 

Vælger Class

For at vælge elementer med samme klasse skal du bruge en prik "." efterfulgt af klassenavnet. Vælger f.eks. .my-class alle elementer med klassen my-class.

For at vælge elementer med flere klasser skal du bruge prikker "." og angiv klassenavnene adskilt af mellemrum. Vælger f.eks. .class1.class2 elementer med både class1 og class2 klasser.

 

Vælger id

For at vælge et specifikt element ved dets id, brug en hash "#" efterfulgt af elementets id. Vælger f.eks. #my-id elementet med id my-id.

 

Kombinere Element, Class og ID Valg

Du kan kombinere element, class, og id-valg for at målrette mod specifikke elementer med specifikke klasser og ID.

div.my-class#my-id Vælger for eksempel <div> elementet med class my-class  og ID my-id.

Her er et specifikt eksempel på valg af elementer, class og id i CSS:

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}  

Ved at bruge element, class, og id-valg kan du nemt vælge og style specifikke elementer eller grupper af elementer på din webside.