Recherche…


Introduction

Les classes et les identifiants facilitent le référencement des éléments HTML à partir des scripts et des feuilles de style. L'attribut class peut être utilisé sur une ou plusieurs balises et est utilisé par CSS pour le style. Les identifiants sont cependant destinés à faire référence à un seul élément, ce qui signifie que le même identifiant ne doit jamais être utilisé deux fois. Les identifiants sont généralement utilisés avec JavaScript et les liens internes aux documents et sont déconseillés dans les CSS. Cette rubrique contient des explications utiles et des exemples d'utilisation correcte des attributs class et ID en HTML.

Syntaxe

  • class = "class1 class2 class3"
  • id = "uniqueid"

Paramètres

Paramètre Détails
classe Indique la classe de l'élément (non unique)
id Indique l'ID de l'élément (unique dans le même contexte)

Remarques

  • Les class et les id sont tous deux des attributs globaux et peuvent donc être affectés à n'importe quel élément HTML.
  • Les noms de classe doivent commencer par une lettre (AZ ou az) et peuvent être suivis de lettres, de chiffres, de tirets et de traits de soulignement.
  • En HTML5 , les attributs class et id peuvent être utilisés sur n'importe quel élément. Dans HTML 4.0.1, ils étaient interdits aux balises <base> , <head> , <html> , <meta> , <param> , <script> , <style> et <title> .
  • Un élément peut avoir une ou plusieurs classes. Les classes sont séparées par des espaces et ne peuvent pas contenir d'espaces eux-mêmes.
  • Un élément ne peut avoir qu’un seul identifiant et doit être unique dans son contexte (c’est-à-dire une page Web). Les identifiants ne peuvent pas non plus contenir d'espaces eux-mêmes.

Donner un élément à une classe

Les classes sont des identificateurs pour les éléments auxquels elles sont affectées. Utilisez l'attribut class pour affecter une classe à un élément.

<div class="example-class"></div>

Pour affecter plusieurs classes à un élément, séparez les noms de classe par des espaces.

<div class="class1 class2"></div>

Utiliser des classes en CSS

Les classes peuvent être utilisées pour styliser certains éléments sans changer tous les éléments de ce type. Par exemple, ces deux span éléments peuvent avoir Stylings complètement différents:

<span></span>
<span class="special"></span>

Des classes du même nom peuvent être attribuées à un nombre quelconque d'éléments sur une page et elles recevront toutes le style associé à cette classe. Cela sera toujours vrai sauf si vous spécifiez l'élément dans le CSS.

Par exemple, nous avons deux éléments, les deux avec la classe highlight :

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Si notre CSS est comme ci-dessous, alors la couleur verte sera appliquée au texte dans les deux éléments:

.highlight { color: green; }

Cependant, si nous voulons seulement cibler les div avec le highlight la classe, nous pouvons ajouter une spécificité comme ci-dessous:

div.highlight { color: green; }

Néanmoins, lors du stylisme avec CSS, il est généralement recommandé de n’utiliser que des classes (par exemple, .highlight ) plutôt que des éléments avec des classes (par exemple, div.highlight ).

Comme pour tout autre sélecteur, les classes peuvent être imbriquées:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

Vous pouvez également enchaîner le sélecteur de classe pour sélectionner uniquement les éléments qui combinent plusieurs classes. Par exemple, s'il s'agit de notre HTML:

<div class="special left menu">This text will be pink</div>

Et nous voulons colorer cette partie spécifique du texte en rose, nous pouvons faire ce qui suit dans notre CSS:

.special.left.menu { color: pink; } 

Donner un identifiant à un élément

L'attribut ID d'un élément est un identifiant qui doit être unique dans tout le document. Son but est d'identifier de manière unique l'élément lors de la liaison (à l'aide d'une ancre), du script ou du styling (avec CSS).

<div id="example-id"></div>

Vous ne devriez pas avoir deux éléments avec le même ID dans le même document, même si les attributs sont attachés à deux types d'éléments différents. Par exemple, le code suivant est incorrect:

<div id="example-id"></div>
<span id="example-id"></span>

Les navigateurs feront de leur mieux pour rendre ce code, mais un comportement inattendu peut se produire lors de la création de styles avec CSS ou de l'ajout de fonctionnalités avec JavaScript.

Pour référencer des éléments par leur ID en CSS, préfixez l'ID avec # .

#example-id { color: green; }

Pour accéder à un élément avec un ID sur une page donnée, ajoutez # avec le nom de l'élément dans l'URL.

http://example.com/about#example-id

Cette fonctionnalité est prise en charge dans la plupart des navigateurs et ne nécessite pas JavaScript ou CSS supplémentaire pour fonctionner.

Problèmes liés aux ID en double

Avoir plus d'un élément avec le même ID est un problème difficile à résoudre. L'analyseur HTML tentera généralement de rendre la page dans tous les cas. Généralement aucune erreur ne se produit. Mais le rythme pourrait se retrouver dans une page Web qui se comporte mal.

Dans cet exemple:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

Les sélecteurs CSS fonctionnent toujours

#aDiv {
    color: red;
}

Mais JavaScript ne gère pas les deux éléments:

var html = document.getElementById("aDiv").innerHTML;

Dans ce cas, la variable html ne porte que le premier contenu div ("a") .

Valeurs acceptables

Pour un identifiant

5

Les seules restrictions sur la valeur d'un id sont:

  1. il doit être unique dans le document
  2. il ne doit contenir aucun espace
  3. il doit contenir au moins un caractère

Donc, la valeur peut être tous les chiffres, un seul chiffre, juste des caractères de ponctuation, inclure des caractères spéciaux, peu importe. Juste pas de blanc.

Donc ce sont valables:

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Ceci est invalide:

<div id=" "> ... </div>

Ceci est également invalide, lorsqu'il est inclus dans le même document:

<div id="results"> ... </div>
<div id="results"> ... </div>
4.01

Une valeur d' id doit commencer par une lettre, qui ne peut alors être suivie que par:

  • lettres (AZ / az)
  • chiffres (0-9)
  • traits d'union ("-")
  • traits de soulignement ("_")
  • colons (":")
  • périodes (".")

En vous référant au premier groupe d'exemples dans la section HTML5 ci-dessus, un seul est valide:

<div id="container"> ... </div>

Ce sont également valables:

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

Encore une fois, s'il ne commence pas par une lettre (majuscule ou minuscule), ce n'est pas valide.


Pour une classe

Les règles pour les classes sont essentiellement les mêmes que pour un id . La différence est que class valeurs de class n'ont pas besoin d'être uniques dans le document.

En vous référant aux exemples ci-dessus, bien que cela ne soit pas valable dans le même document:

<div id="results"> ... </div>
<div id="results"> ... </div>

Ceci est parfaitement correct:

<div class="results"> ... </div>
<div class="results"> ... </div>

Remarque importante: Comment les valeurs d'ID et de classe sont traitées en dehors du code HTML

Gardez à l'esprit que les règles et les exemples ci-dessus s'appliquent dans le contexte du HTML.

L'utilisation de nombres, de ponctuation ou de caractères spéciaux dans la valeur d'un id ou d'une class peut causer des problèmes dans d'autres contextes, tels que CSS, JavaScript et les expressions régulières.

Par exemple, bien que l' id suivant soit valide en HTML5:

<div id="9lions"> ... </div>

... il est invalide en CSS:

4.1.3 Caractères et cas

En CSS, les identificateurs (y compris les noms d'éléments, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-zA-Z0-9] et les caractères ISO 10646 U + 00A0 et supérieur, plus le tiret _); ils ne peuvent pas commencer par un chiffre, deux tirets ou un tiret suivi d'un chiffre . (soulignement ajouté)

Dans la plupart des cas, vous pouvez échapper à des caractères dans des contextes où ils ont des restrictions ou une signification particulière.


Références W3C



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow