Grundläggande CSS: Välja element, ID och Class

I CSS kan du välja element, class och id för att tillämpa stilar och anpassa element på din webbsida. Här är en detaljerad guide om hur du använder dem:

 

Välja element

För att välja alla instanser av ett specifikt HTML-element, använd elementnamnet som en väljare. p Markerar till exempel alla <p> taggar i dokumentet.

 

Väljer Class

För att välja element med samma klass, använd en punkt "." följt av klassnamnet. Markerar till exempel .my-class alla element med klassen my-class.

För att välja element med flera klasser, använd prickar "." och lista klassnamnen separerade med mellanslag. Väljer till exempel .class1.class2 element med både class1 och class2 klasser.

 

Väljer id

För att välja ett specifikt element med dess id, använd en hash "#" följt av elementets id. Väljer till exempel #my-id elementet med id my-id.

 

Kombinera Element, Class, och ID urval

Du kan kombinera element, class, och id-val för att rikta in dig på specifika element med specifika klasser och ID.

div.my-class#my-id Väljer till exempel <div> elementet med class my-class  och ID my-id.

Här är ett specifikt exempel på att välja element, class och 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;  
}  

Genom att använda element, class, och id-val kan du enkelt välja och utforma specifika element eller grupper av element på din webbsida.