HTML
Classes et identifiants

Introduction

Syntaxe

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

Paramètres

Remarques

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

<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>

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

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

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

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

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

• 3.2.5.1 L'attribut id
• 3.2.5.7 L'attribut de class
• 6.2 Types de base SGML