Docs CSS exécutables : Sélecteurs CSS

Q: Qu'est-ce qu'un sélecteur CSS ?

La partie d'une règle CSS placée avant la {, qui indique à quels éléments s'appliquent les déclarations. Dans p.note { color: blue; }, le sélecteur p.note cible chaque qui a la classe note.

Q: Quelle différence entre un espace et > dans un sélecteur CSS ?

Un espace est le combinateur descendant : nav a cible tous les liens n'importe où dans un nav, à toute profondeur. > est le combinateur enfant : nav > a ne cible que les liens dont le parent direct est le nav.

Q: Que signifie + en CSS ?

est le combinateur de frère adjacent. h2 + p cible un qui suit immédiatement un de même parent. ~ est plus souple : h2 ~ p cible tous les frères qui suivent.

Q: Comment sélectionner des éléments par attribut en CSS ?

Mettez l'attribut entre crochets : [disabled] cible les éléments qui l'ont, [type="email"] une valeur exacte, [href^="https"] une valeur qui commence par une chaîne, [href$=".pdf"] une valeur qui se termine par elle, et [class*="btn"] une valeur qui la contient.

Q: Le CSS peut-il sélectionner un élément parent ?

Oui, avec la pseudo-classe :has(), prise en charge par les versions actuelles de Chrome, Firefox et Safari. li:has(> a.active) cible les éléments de liste qui contiennent directement un lien actif.

Ce qu'est un sélecteur CSS

Un sélecteur est la partie d'une règle placée avant les accolades. Il décide à quels éléments s'appliquent les déclarations.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Les cinq sélecteurs de base couvrent la plupart des feuilles de style réelles :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Les types de sélecteurs en un coup d'œil

Sélecteur	Exemple	Cible
Universel	`*`	Tous les éléments
Type	`p`	Tous les `<p>`
Classe	`.tip`	Les éléments avec `class="tip"` (entre autres classes)
ID	`#main-title`	L'élément avec `id="main-title"`
Attribut	`[type="email"]`	Les éléments dont l'attribut correspond
Pseudo-classe	`a:hover`, `li:first-child`	Les éléments dans un état ou une position
Pseudo-élément	`p::first-line`, `.x::before`	Une partie d'un élément
Groupe	`h1, h2, h3`	Tout ce qui correspond à un élément de la liste
Composé	`p.tip`	Un `<p>` qui a aussi la classe

Les classes et les ID ont leur propre page, le sélecteur de classe CSS. Les pseudo-classes comme :nth-child() et :not() sont traitées sur la page des pseudo-classes.

Combinateurs : descendant ou enfant

Un combinateur relie deux sélecteurs selon leur relation dans l'arbre HTML. Il en existe quatre.

Combinateur	Syntaxe	Cible `B` quand
Descendant	`A B` (espace)	B est n'importe où dans A
Enfant	`A > B`	Le parent de B est A
Frère adjacent	`A + B`	B vient juste après A, même parent
Frère général	`A ~ B`	B vient quelque part après A, même parent

L'espace et le > sont la paire que l'on confond. Le sélecteur descendant atteint n'importe quelle profondeur ; le sélecteur d'enfant s'arrête à un niveau :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Combinateurs de frères : + et ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Les frères ne regardent que vers l'avant. Il n'existe pas de combinateur « frère précédent », mais :has() permet de l'exprimer : h2:has(+ p) cible un h2 immédiatement suivi d'un p.

Sélecteurs d'attribut

Les crochets ciblent les attributs et leurs valeurs :

Sélecteur	Cible
`[disabled]`	A l'attribut, quelle que soit la valeur
`[type="email"]`	La valeur est exactement `email`
`[href^="https"]`	La valeur commence par `https`
`[href$=".pdf"]`	La valeur se termine par `.pdf`
`[class*="icon"]`	La valeur contient `icon` n'importe où
`[lang\|="en"]`	La valeur est `en` ou commence par `en-`
`[data-state="open" i]`	Correspondance exacte, sans tenir compte de la casse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Les sélecteurs d'attribut sur les attributs data-* sont une façon propre de styliser un état défini par JavaScript, sans inventer de noms de classes.

Testez n'importe quel sélecteur

Tapez un sélecteur dans le champ. Chaque élément ciblé reçoit un contour ambre, et le nombre s'affiche en dessous.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Essayez #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Composé ou descendant : l'espace compte

p.note et p .note ne diffèrent que d'un espace et n'ont pas le même sens.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Comment les navigateurs lisent les sélecteurs

Quand plusieurs règles ciblent le même élément et définissent la même propriété, le sélecteur le plus spécifique gagne, et en cas d'égalité le dernier l'emporte. Un ID pèse plus que n'importe quel nombre de classes, et une classe plus que n'importe quel nombre de sélecteurs de type ; la page sur !important donne le tableau complet de la spécificité.

Un groupe a un piège : si un seul sélecteur d'une liste simple est invalide, toute la règle est ignorée. Dans a, b:unknown { }, même les liens ne sont pas stylisés. Entourer la liste de :is() la rend tolérante, et :is(a, b:unknown) stylise toujours les liens.

Erreurs courantes

Oublier le point ou le dièse. tip { } cible un élément <tip>, pas class="tip". Écrivez .tip.
Un espace dans un sélecteur composé. p .note n'est pas p.note.
Croire que > atteint les petits-enfants. Utilisez un espace pour toute profondeur.
Une faute de frappe casse tout un groupe. Dans h1, h2:hovr, h3, rien n'est stylisé.
Des sélecteurs trop longs. body div.wrapper ul li a est lent à lire et difficile à surcharger. Une seule classe suffit en général.

Questions fréquentes

Qu'est-ce qu'un sélecteur CSS ?

La partie d'une règle CSS placée avant la {, qui indique à quels éléments s'appliquent les déclarations. Dans p.note { color: blue; }, le sélecteur p.note cible chaque <p> qui a la classe note.

Quelle différence entre un espace et > dans un sélecteur CSS ?

Un espace est le combinateur descendant : nav a cible tous les liens n'importe où dans un nav, à toute profondeur. > est le combinateur enfant : nav > a ne cible que les liens dont le parent direct est le nav.

Que signifie + en CSS ?

+ est le combinateur de frère adjacent. h2 + p cible un <p> qui suit immédiatement un <h2> de même parent. ~ est plus souple : h2 ~ p cible tous les <p> frères qui suivent.

Comment sélectionner des éléments par attribut en CSS ?

Mettez l'attribut entre crochets : [disabled] cible les éléments qui l'ont, [type="email"] une valeur exacte, [href^="https"] une valeur qui commence par une chaîne, [href$=".pdf"] une valeur qui se termine par elle, et [class*="btn"] une valeur qui la contient.

Le CSS peut-il sélectionner un élément parent ?

Oui, avec la pseudo-classe :has(), prise en charge par les versions actuelles de Chrome, Firefox et Safari. li:has(> a.active) cible les éléments de liste qui contiennent directement un lien actif.

Concepts liés