Quels sélecteurs CSS connaissez-vous?

• Sélecteur universel (*) - sélectionne tous les éléments.
• Sélecteur de type (élément) - sélectionne des éléments d’un type spécifique.
• Sélecteur de classe (.classe) - sélectionne des éléments avec une classe spécifique.
• Sélecteur d’identifiant (#id) - sélectionne un élément avec un identifiant spécifique.
• Sélecteur d’attribut ([attribut], [attribut="valeur"], [attribut~="valeur"], [attribut|="valeur"], [attribut^="valeur"], [attribut$="valeur"], [attribut*="valeur"]) - sélectionne des éléments en fonction de la présence ou de la valeur de l’attribut.
• Pseudo-classes (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(sélecteur)) - sélectionnent des éléments dans un état ou une position spécifiques.
• Pseudo-éléments (::before, ::after, ::first-line, ::first-letter, ::selection) - sélectionnent des parties d’un élément.
• Combinateurs:
  • Sélecteur descendant (sélecteur sélecteur) - sélectionne les éléments descendants du premier sélecteur.
  • Sélecteur enfant direct (sélecteur > sélecteur) - sélectionne les enfants directs du premier sélecteur.
  • Sélecteur frère adjacent (sélecteur + sélecteur) - sélectionne l’élément qui est frère immédiat (suivant) du premier sélecteur.
  • Sélecteur frère général (sélecteur ~ sélecteur) - sélectionne tous les éléments qui sont frères (suivants) du premier sélecteur.

Exemples:

/* Sélecteur universel */
* {
  margin: 0;
  padding: 0;
}

/* Sélecteur de type */
p {
  line-height: 1.5;
}

/* Sélecteur de classe */
.highlight {
  color: yellow;
}

/* Sélecteur d’identifiant */
#main-header {
  font-size: 2em;
}

/* Sélecteur d’attribut */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-classe */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-élément */
p::first-letter {
  font-weight: bold;
}

/* Combinateurs */
div p {
  margin-bottom: 10px; /* Paragraphes à l’intérieur de div */
}
ul > li {
  list-style: none; /* Enfants directs de li à l’intérieur de ul */
}
h2 + p {
  margin-top: 5px; /* Paragraphe qui suit immédiatement h2 */
}
h3 ~ p {
  color: gray; /* Tous les paragraphes après h3 */
}