Les Sélecteurs Essentiels¶

Ce guide rapide présente les principaux sélecteurs CSS avec des exemples simples pour bien comprendre leur fonctionnement.

🔹 Sélecteur de balise¶

Sélectionne tous les éléments de la balise donnée.

p {
  color: blue;
}

➡️ Tous les <p> seront écrits en bleu.

Sélectionne tous les éléments enfants d’un type spécifique à l’intérieur d’un autre.

div p {
  font-size: 1rem;
}

➡️ Tous les <p> à l’intérieur d’un <div> auront une taille de 1rem.

Utilise l’attribut id pour cibler un élément unique.

#monElement {
  background-color: lightgray;
}

➡️ L’élément avec id="monElement" aura un fond gris clair.

Cible tous les éléments ayant une classe spécifique.

.card {
  border: 1px solid #ccc;
}

➡️ Tous les éléments avec class="card" auront une bordure.

Cible uniquement les enfants directs d’un élément.

main > p {
  font-style: italic;
}

➡️ Seuls les <p> directement dans un <main> seront en italic.

Cible un élément qui suit immédiatement un autre.

h2 + p {
  margin-top: 0;
}

➡️ Un <p> qui suit directement un <h2> aura une marge supérieure de 0.

Cible les éléments qui possèdent un attribut spécifique.

a[target="_blank"] {
  text-decoration: underline;
}

➡️ Tous les <a> ayant l'attribut target qui ouvre un nouvel onglet seront soulignés.

Cible les éléments qui ne correspondent pas à un sélecteur donné.

div:not(.active) {
  background-color: rgba(255,255,255,0.5);
}

➡️ Tous les <div> qui n’ont pas la classe active auront une couleur de fond blanc semi-transparent.

Cible lorsque la souris survole un élément :

a:hover {
  background-color: yellow;
}

➡️ Lorsque la souris passe au-dessus d'un <a> la couleur de fond devient jaune.

Permet de dresser une liste de sélecteurs pour appliquer les mêmes styles à plus d'un élément :

a, #special_text, p:hover {
  background-color: grey;
}

➡️ Les liens cliquables, la balise ayant l'id special_text, ainsi qu'un paragraphe survolé auront une couleur de fond grise.

💡 Astuce : Combinez les sélecteurs pour un ciblage plus précis et un style plus raffiné !

💡 Astuce : Avec les sélecteurs de balise, d'enfant, de classe, de speudo-classe et d'identifiant, on arrive à tout !

Sélecteurs importants

Il existe une multitude de sélecteurs en CSS...beaucoup plus que ceux nommés ici !

Mais avec de simples sélecteurs tels que balise, enfant, identifiant, classe, survol et liste, on arrive à tout faire !