Sélection d'ID CSS pour les éléments avec des ID en pointillés

La spécification CSS permet aux sélecteurs d'ID d'identifier des éléments HTML spécifiques. Cependant, un problème survient lorsqu'un identifiant contient un point (.). Les sélecteurs d'ID CSS ne prennent pas en charge de tels ID de manière native.

Malgré le manque de mention claire dans la spécification CSS, l'hypothèse est que les sélecteurs d'ID CSS traitent l'ID avec des points comme une combinaison de nom de balise et de sélecteur de classe. Par exemple, "#id.class" ciblerait tous les éléments portant l'ID "id" et la classe "class".

Cependant, définir une règle CSS externe faisant référence à un élément HTML avec un ID en pointillés pose des problèmes . La spécification CSS précise qu'un "identifiant" CSS n'inclut pas le caractère point. Cela crée une inadéquation potentielle entre les spécifications HTML et CSS.

La solution alternative à l'utilisation des sélecteurs d'ID CSS consiste à explorer d'autres types de sélection CSS. Cependant, dans les cas où la modification de l'ID HTML n'est pas possible, une solution de contournement existe.

Selon la spécification CSS, l'échappement par barre oblique inverse () est autorisé. Par conséquent, pour cibler un élément HTML avec un ID en pointillé, utilisez la syntaxe suivante :

#some\.id {
  /* CSS Declarations */
}

Dans cet exemple, la barre oblique inverse avant le point permet au sélecteur CSS d'identifier correctement l'élément avec l'ID "some.id."