Docs CSS exécutables : Sélecteur de classe

Q: Comment sélectionner une classe en CSS ?

Écrivez un point suivi du nom de la classe : .card { ... } met en forme tous les éléments avec class="card". Le point n'existe que dans le CSS ; l'attribut HTML n'en a pas.

Q: Comment donner deux classes à un élément ?

Séparez les noms par un espace dans un seul attribut : class="btn primary". Écrire class deux fois sur un élément ne fonctionne pas ; le navigateur ne garde que le premier attribut.

Q: Comment sélectionner un élément qui a deux classes ?

Enchaînez les sélecteurs de classe sans espace : .btn.primary cible les éléments qui ont les deux classes. Avec un espace, .btn .primary désigne un élément .primary à l'intérieur d'un élément .btn.

Le sélecteur de classe

Un sélecteur de classe est un point suivi d'un nom de classe. Il met en forme tous les éléments dont l'attribut class contient ce nom, quel que soit le type d'élément.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Le point n'apparaît que dans le CSS. En HTML, l'attribut est class="badge", sans point. Les noms de classes sont sensibles à la casse : .Badge ne correspond pas à class="badge".

Plusieurs classes sur un élément

Un élément peut porter autant de classes que vous voulez, séparées par des espaces. Chacune apporte ses propres règles, et c'est ainsi que l'on construit des variantes à partir de petites briques :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, sans espace, cible les éléments qui ont les deux classes. Le dernier span a danger mais pas btn, donc la règle enchaînée l'ignore.

Variantes du sélecteur de classe

Sélecteur	Cible
`.note`	Tout élément avec la classe `note`
`p.note`	Seulement les éléments `<p>` avec la classe `note`
`.btn.primary`	Les éléments qui ont à la fois `btn` et `primary`
`.card .title`	Un `.title` n'importe où dans un `.card`
`.card > .title`	Un `.title` dont le parent est un `.card`
`.a, .b`	Les éléments avec `a` ou `b`

La différence entre l'espace et l'absence d'espace est détaillée, avec d'autres combinateurs, sur la page des sélecteurs CSS.

Le sélecteur d'ID

Un sélecteur d'ID est un dièse suivi de l'id : #site-header met en forme l'élément avec id="site-header". Un id doit être unique dans la page, donc un sélecteur d'ID cible exactement un élément.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Les id servent à plus que le style : href="#details" fait défiler jusqu'à l'élément, <label for="email"> pointe vers l'id d'un champ, et JavaScript le trouve avec document.getElementById('details'). C'est la raison habituelle de donner un id à un élément ; pour le style, une classe est le meilleur outil.

Classe ou ID

	Classe `.name`	ID `#name`
Par page	Plusieurs éléments	Un élément
Par élément	Plusieurs, séparées par des espaces	Un
Spécificité	(0,1,0)	(1,0,0)
Cible d'un lien (`#name` dans une URL)	Non	Oui
Idéal pour	Le style	Ancres, labels, points d'accroche JavaScript

L'écart de spécificité est la raison pratique de styliser avec des classes. Un ID bat n'importe quel nombre de classes, donc une règle écrite avec un ID ne peut être surchargée que par un autre ID, un style inline ou !important :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Ajouter et retirer des classes avec JavaScript

Les classes sont la façon normale pour JavaScript de changer l'apparence d'un élément : le CSS définit les états, le script ne fait que les basculer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList propose aussi add, remove, contains et replace. Évitez d'affecter className directement : cela remplace toutes les classes de l'élément.

Nommer les classes

Les lettres, chiffres, traits d'union et underscores sont sûrs : card, card-title, card__title, is-open.
Ne commencez pas un sélecteur par un chiffre ni par un trait d'union suivi d'un chiffre. .2col est du CSS invalide. Commencez par une lettre (.cols-2) ou échappez le chiffre (.\32 col).
Nommez selon le rôle, pas selon l'apparence : .error survit à une refonte, .red-text non.
Une convention de nommage aide sur les gros projets. BEM écrit block__element--modifier, par exemple .card__title--large.

Erreurs courantes

Mettre le point dans le HTML. class=".badge" ne correspond jamais à .badge.
Deux attributs class. <p class="a" class="b"> ne garde que a. Utilisez class="a b".
Un espace alors que vous vouliez les deux classes. .btn .primary cherche un élément imbriqué ; .btn.primary désigne le même élément.
Réutiliser un id. Des id en double cassent getElementById, les liens d'ancre et les associations de labels, même si le CSS semble fonctionner.
Tout styliser avec des id. Leur spécificité rend les surcharges ultérieures pénibles ; utilisez des classes.

Questions fréquentes

Comment sélectionner une classe en CSS ?

Écrivez un point suivi du nom de la classe : .card { ... } met en forme tous les éléments avec class="card". Le point n'existe que dans le CSS ; l'attribut HTML n'en a pas.

Quelle est la différence entre une classe et un id en CSS ?

Une classe peut servir sur autant d'éléments que vous voulez, et un élément peut en avoir plusieurs ; un id doit être unique dans la page, et un élément en a au plus un. En CSS, #id a une spécificité bien plus élevée que .class, donc les règles par ID sont plus difficiles à surcharger.

Comment donner deux classes à un élément ?

Séparez les noms par un espace dans un seul attribut : class="btn primary". Écrire class deux fois sur un élément ne fonctionne pas ; le navigateur ne garde que le premier attribut.

Comment sélectionner un élément qui a deux classes ?

Enchaînez les sélecteurs de classe sans espace : .btn.primary cible les éléments qui ont les deux classes. Avec un espace, .btn .primary désigne un élément .primary à l'intérieur d'un élément .btn.

Un nom de classe CSS peut-il commencer par un chiffre ?

En HTML oui, mais un sélecteur ne peut pas commencer par un chiffre non échappé, donc .1col est du CSS invalide. Échappez le chiffre (.\31 col) ou, mieux, commencez les noms de classes par une lettre.

Concepts liés