Grunnleggende CSS: Velge elementer, ID og Class

I CSS kan du velge elementer, class og id for å bruke stiler og tilpasse elementer på nettsiden din. Her er en detaljert veiledning for hvordan du bruker dem:

 

Velge elementer

For å velge alle forekomster av et spesifikt HTML-element, bruk elementnavnet som en velger. p Velger for eksempel alle <p> tagger i dokumentet.

 

Velger Class

For å velge elementer med samme klasse, bruk en prikk "." etterfulgt av klassenavnet. Velger for eksempel .my-class alle elementene med klassen my-class.

For å velge elementer med flere klasser, bruk prikker "." og liste opp klassenavnene atskilt med mellomrom. Velger for eksempel .class1.class2 elementer med både class1 og class2 klasser.

 

Velger id

For å velge et spesifikt element med dets id, bruk en hash "#" etterfulgt av elementets id. Velger for eksempel #my-id elementet med id my-id.

 

Kombinere Element, Class og ID utvalg

Du kan kombinere element-, class og id-valg for å målrette mot spesifikke elementer med spesifikke klasser og ID.

div.my-class#my-id Velger for eksempel <div> elementet med class my-class  og ID my-id.

Her er et spesifikt eksempel på valg av 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 å bruke element, class, og id-valg kan du enkelt velge og style spesifikke elementer eller grupper av elementer på nettsiden din.