Basic CSS: elementen selecteren, ID en Class

In CSS kunt u elementen selecteren, class en id om stijlen toe te passen en elementen op uw webpagina aan te passen. Hier is een gedetailleerde handleiding voor het gebruik ervan:

 

Elementen selecteren

Om alle exemplaren van een specifiek HTML-element te selecteren, gebruikt u de elementnaam als selector. p Selecteert bijvoorbeeld alle <p> tags in het document.

 

Selecteren Class

Gebruik een punt "." om elementen met dezelfde klasse te selecteren. gevolgd door de naam van de klas. Selecteert bijvoorbeeld .my-class alle elementen met de klasse my-class.

Gebruik punten "." om elementen met meerdere klassen te selecteren. en vermeld de klassennamen gescheiden door spaties. Selecteert bijvoorbeeld .class1.class2 elementen met zowel class1 als class2 klassen.

 

Selecteren id

Om een ​​specifiek element te selecteren op zijn id, gebruikt u een hash "#" gevolgd door de id. Selecteert bijvoorbeeld #my-id het element met de id my-id.

 

Combineren van Element, Class, en ID selecties

U kunt element-, class ,- en id-selecties combineren om specifieke elementen met specifieke klassen en ID.

Selecteert bijvoorbeeld div.my-class#my-id het <div> element met de class my-class  en de ID my-id.

Hier is een specifiek voorbeeld van het selecteren van elementen, class, en id in 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;  
}  

Door element, class, en id-selecties te gebruiken, kunt u eenvoudig specifieke elementen of groepen elementen op uw webpagina selecteren en stylen.