Les sélecteurs

À l'aide de la règle CSS et de son sélecteur, on peut, d'un seul geste, appliquer une mise en forme à plusieurs éléments à la fois.

Un sélecteur peut être :

• Un nom de balise, ex. : h1 { ... }
• Un nom de classe précédé d'un point (.), ex. : .header { ... }
• Le id d'une balise précédé d'un dièse (#), ex. : #menuprincipal { ... }
• Une combinaison des précédents, ex. : div.nav#menuprincipal { ... }

On peut également créer des sélecteurs qui ciblent des éléments selon leur position ou leur état :

Type de relation / sélecteur	Syntaxe	Exemple	Description
Balise	balise	h1	Cible toutes les balises du type spécifié.
Classe	.nomclasse	.header	Cible tous les éléments ayant la classe donnée.
ID	#nomid	#menuprincipal	Cible un seul élément portant cet identifiant.
Combinaison	A.B#id	div.nav#menuprincipal	Cible un élément avec balise, classe, et ID spécifiques.
Descendant	A B	div p	Cible tous les <p> à l'intérieur d'un <div>, peu importe la profondeur.
Enfant direct	A > B	div > p	Cible uniquement les <p> directement contenus dans un <div>.
Frère immédiat	A + B	h2 + p	Cible le premier <p> immédiatement après un <h2>.
Frères suivants	A ~ B	h2 ~ p	Cible tous les <p> qui suivent un <h2> dans le même parent.
Juxtaposition	A, B	h1, h2, h3	Cible plusieurs types d'éléments en une seule règle.
Pseudo-classe	A:état	a:hover	Cible un élément selon son état, comme le survol, le focus, ou la position dans le DOM.
Pseudo-élément	A::partie	p::first-line	Cible une partie virtuelle d'un élément, comme avant, après, ou la première ligne.

Les pseudo-classes et pseudo-éléments

• Pseudo-classes (commencent par :) : ciblent un élément selon son état ou sa position dans le DOM.
• :hover, quand la souris survole un élément.
• :focus, quand l'élément reçoit le focus (clavier, clic, ou tabulation).
• :active, pendant le clic sur un lien ou un bouton.
• :first-child, :last-child, :nth-child(), selon la position de l'élément dans son parent.
• :checked, pour les cases à cocher ou boutons radio activés.
• :disabled, :required, :valid, pour cibler les champs de formulaires selon leur état.
• Pseudo-éléments (commencent par ::) : ciblent une partie virtuelle d'un élément HTML.
• ::before, et ::after, ajoutent du contenu avant ou après l'élément.
• ::first-line, stylise uniquement la première ligne du texte.
• ::first-letter, stylise la première lettre, souvent utilisée pour des effets d'enluminure.
• ::selection, modifie la couleur du texte sélectionné.

Exemples pratiques :

/* Pseudo-classes */
a:hover {
	color: red;
	text-decoration: underline;
}

input:focus {
	outline: 2px solid dodgerblue;
}

/* Pseudo-éléments */
p::first-letter {
	font-size: 2em;
	color: darkgreen;
	font-weight: bold;
}

p::before {
	content: "→ ";
	color: gray;
}

::selection {
	background: gold;
	color: black;
}

Imbrication des règles CSS

Autrefois réservée à Sass ou Less, l'imbrication des règles est maintenant une fonctionnalité standard du CSS (module CSS Nesting Level 1).

Elle permet d'écrire du CSS plus concis, plus lisible et plus proche de la structure HTML.

Exemple de base

nav {
  color: white;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

Ce code est maintenant valide en CSS pur et produit le même résultat que :

nav { color: white; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

Le symbole &

Le & représente le sélecteur parent. Il est utilisé pour créer des états ou des variantes sans répéter le sélecteur.

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &.large {
    font-size: 1.5em;
  }
}

Imbrication multiple

On peut imbriquer plusieurs niveaux, mais il est conseillé de rester clair et lisible.

main {
  section {
    h2 {
      color: darkred;
    }
  }
}

Bonnes pratiques

• Ne pas dépasser 3 niveaux d'imbrication.
• Utiliser & pour les états, modificateurs ou classes combinées.
• Vérifier que le CSS généré reste simple et performant.
• Utiliser l'imbrication pour exprimer la hiérarchie, pas pour tout centraliser.

Compatibilité

L'imbrication CSS est désormais supportée par :

• Chrome 112+
• Edge 112+
• Safari 16.5+
• Firefox 117+