1. Sélecteurs de base

Sélecteur universel

* {
  /* Code CSS ici */
}

Sélectionne tous les éléments.

Sélecteur de type

element {
  /* Code CSS ici */
}

Sélectionne tous les éléments du type spécifié, par exemple `div`, `p`, `h1`.

Sélecteur de classe

.class {
  /* Code CSS ici */
}

Sélectionne tous les éléments ayant la classe spécifiée.

Sélecteur d'ID

#id {
  /* Code CSS ici */
}

Sélectionne l'élément avec l'ID spécifié (doit être unique).

Sélecteur d'attribut

[attr="valeur"] {
  /* Code CSS ici */
}

Sélectionne les éléments ayant un attribut avec une valeur exacte.

2. Sélecteurs combinés

Sélecteur descendant

Il permet de sélectionner les éléments qui sont des descendants d'un autre élément, qu'ils soient enfants directs ou non.

div p {
  color: green;
}

Dans cet exemple, tous les éléments <p> qui se trouvent à l'intérieur d'un élément <div> (peu importe leur profondeur dans la hiérarchie) auront un texte de couleur verte.

Bon à savoir

Le sélecteur descendant ne se limite pas aux enfants directs ; il sélectionne tous les descendants, quel que soit leur niveau dans l'arborescence DOM.

Sélecteur enfant direct

Il permet de sélectionner uniquement les éléments qui sont des enfants directs d'un autre élément, c'est-à-dire ceux qui sont directement à un niveau immédiatement inférieur dans l'arborescence DOM.

div > p {
  color: red;
}

Dans cet exemple, seuls les éléments <p> qui sont des enfants directs d'un élément <div> auront un texte de couleur rouge. Les éléments <p> qui sont des descendants plus profonds, mais pas des enfants directs, ne seront pas affectés.

Différence avec le Sélecteur Descendant :

  • Sélecteur descendant ( ) : sélectionne tous les éléments descendants, qu'ils soient directs ou non.
  • Sélecteur enfant direct ( > ) : sélectionne uniquement les éléments enfants directs.

Sélecteur adjacent

Il permet de sélectionner un élément qui est immédiatement après un autre élément, à condition qu'ils partagent le même parent.

h1 + p {
  color: blue;
}

Dans cet exemple, le paragraphe (<p>) qui suit immédiatement un titre de niveau 1 (<h1>) sera stylisé avec un texte de couleur bleue. Si un autre élément se trouve entre h1 et p, ce sélecteur ne s'appliquera pas.

Important
  • Le sélecteur adjacent ( + ) ne cible que le premier élément qui suit immédiatement l'élément spécifié, et ils doivent avoir le même parent.
  • Si l'élément suivant est d'un type différent ou qu'il y a un autre élément entre eux, le style ne s'appliquera pas.

General sibling combinator

Ils permettent de sélectionner des éléments qui partagent le même parent et qui apparaissent après un élément donné dans le document, mais pas nécessairement immédiatement après.

h1 ~ p {
  color: blue;
}

Dans cet exemple, tous les éléments <p> qui sont des frères de <h1> et qui apparaissent après lui dans le même parent auront un texte en bleu. Ces éléments <p> n'ont pas besoin d'être directement adjacents à <h1> ; ils peuvent être séparés par d'autres éléments.

Différence avec le sélecteur adjacent
  • Le sélecteur Adjacent (+) : cible uniquement l'élément qui suit immédiatement un autre élément.
  • Le sélecteur sibling (~) : cible tous les éléments qui suivent, même s'ils ne sont pas directement adjacents.

Sélecteur de groupe

Il permet de sélectionner plusieurs éléments en une seule déclaration.

h1, h2, h3 {
  color: blue;
}

Dans cet exemple, tous les éléments <h1>, <h2>, et <h3> seront stylisés avec un texte de couleur bleue. Les styles sont appliqués à tous les sélecteurs regroupés.

Bon à savoir
  • Les sélecteurs dans un groupe peuvent être de différents types : éléments, classes, IDs, ou combinaisons.
  • Utiliser des sélecteurs de groupe permet de réduire la répétition dans le CSS et de maintenir le code plus propre et plus facile à gérer.

4. Pseudo-classes

:first-child

Le pseudo-sélecteur :first-child en CSS permet de sélectionner le premier enfant d'un élément parent. Il cible uniquement l'élément qui est le premier enfant direct du parent spécifié, indépendamment de son type ou de ses autres caractéristiques.

ul > li:first-child {
  font-weight: bold;
}

Dans cet exemple, le premier élément <li> dans chaque liste non ordonnée (<ul>) sera stylisé en gras. Si vous avez plusieurs listes, chaque première entrée dans chaque liste sera affectée par ce style.

:last-child

Le pseudo-sélecteur :last-child permet de sélectionner le dernier enfant d'un élément parent. Il cible uniquement l'élément qui est le dernier enfant direct du parent spécifié, peu importe son type ou ses autres caractéristiques.

ul > li:last-child {
  font-style: italic;
}

Dans cet exemple, le dernier élément <li> dans chaque liste non ordonnée (<ul>) sera stylisé en italique. Chaque liste aura son dernier élément <li> affecté par ce style.

:nth-child(n)

Le pseudo-sélecteur :nth-child(n) en CSS permet de sélectionner un ou plusieurs éléments en fonction de leur position dans la liste des enfants de leur parent. Il est très flexible et permet de cibler des éléments basés sur des motifs ou des positions spécifiques.

Synthaxe:

element:nth-child(n) {
  /* styles */
}
  • element : l'élément à styliser.
  • n : un nombre, une expression ou une formule qui détermine quels éléments sont sélectionnés.

Valeurs possible de n

  1. Nombre fixe

    p:nth-child(2) {
    color: red;
}

    Sélectionne le deuxième élément enfant qui est un <p>.

  2. Formule

    li:nth-child(2n) {
background-color: lightgray;
}

    Sélectionne tous les éléments enfants de type <li> à des positions paires (2, 4, 6, etc.).

    • 2n : Sélectionne les éléments aux positions 2, 4, 6, etc.
    • 2n + 1 : Sélectionne les éléments aux positions 1, 3, 5, etc.

:hover

element:hover {
  /* Code CSS ici */
}

Sélectionne l'élément au survol de la souris.

:focus

element:focus {
  /* Code CSS ici */
}

Sélectionne l'élément lorsque le focus est sur lui.

:active

element:active {
  /* Code CSS ici */
}

Sélectionne l'élément lors de l'activation (clic).

:disabled

element:disabled {
  /* Code CSS ici */
}

Sélectionne les éléments désactivés (formulaires).

5. Pseudo-éléments

::before

Le pseudo-élément ::before permet d'insérer du contenu avant le contenu d'un élément, sans ajouter de balise supplémentaire dans le HTML. Il est souvent utilisé pour ajouter des décorations, des icônes, ou du texte avant le contenu principal d'un élément.

p::before {
  content: "▶";
  color: red;
}

Dans cet exemple, une flèche rouge sera ajoutée avant le texte de chaque élément <p>. Le texte ▶ est inséré avant le contenu de chaque paragraphe.

Bon à savoir

content : Cette propriété est obligatoire pour les pseudo-éléments ::before et ::after. Elle peut être utilisée pour ajouter du texte, des images (url('image.png')), ou même du contenu vide ("").

::after

Le pseudo-élément ::after permet d'insérer du contenu après le contenu d'un élément, sans ajouter de balise supplémentaire dans le HTML. Comme ::before, il est utilisé pour ajouter des décorations, des icônes, ou du texte après le contenu principal d'un élément.

p::after {
  content: " (fin)";
  color: green;
}

Dans cet exemple, le texte " (fin)" sera ajouté après le texte de chaque élément <p>. Le texte ajouté sera affiché en vert.