CSS de base : sélection des éléments, ID et Class

Dans CSS, vous pouvez sélectionner des éléments, class et id pour appliquer des styles et personnaliser des éléments sur votre page Web. Voici un guide détaillé sur la façon de les utiliser:

 

Sélection d'éléments

Pour sélectionner toutes les instances d'un élément HTML spécifique, utilisez le nom de l'élément comme sélecteur. Par exemple, p sélectionne toutes <p> les balises du document.

 

Sélection Class

Pour sélectionner des éléments de même classe, utilisez un point "." suivi du nom de la classe. Par exemple, .my-class sélectionne tous les éléments avec la classe my-class.

Pour sélectionner des éléments avec plusieurs classes, utilisez des points "." et répertoriez les noms de classe séparés par des espaces. Par exemple, .class1.class2 sélectionne des éléments avec les deux classes class1 et class2.

 

Sélection id

Pour sélectionner un élément spécifique par son id, utilisez un dièse "#" suivi du id. Par exemple, #my-id sélectionne l'élément avec le id my-id.

 

Combinaison des sélections Element, Class et ID

Vous pouvez combiner class les sélections d'éléments, et d'id pour cibler des éléments spécifiques avec des classes et des éléments spécifiques ID.

Par exemple, div.my-class#my-id sélectionne l' <div> élément avec le class my-class  et le ID my-id.

Voici un exemple spécifique de sélection d'éléments, class et id en 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;  
}  

En utilisant les sélections element, class et id, vous pouvez facilement sélectionner et styliser des éléments spécifiques ou des groupes d'éléments sur votre page Web.