Comment cibler un id qui contient un point
En CSS, tout comme avec le librairie JavaScript jQuery, il faut utiliser des sélecteurs pour cibler une balise ou un ensemble de balise :
- on utilise le sélecteur # si l'on désire accéder à l'élément par la valeur de son attribut id ou,
- on utilise le sélecteur . si on désire accéder à l'élément par une des valeurs de son attribut class.
En combinant les deux sélecteurs précédent on peut sélectionner une balise par son attribut id et son attribut class.
On peut donc cibler la balise HTML suivante :
<div id="main" class="example"></div>
avec le sélecteur CSS suivant :
div#main.example { /* ... */ }
Comment sélectionner l'id d'une balise si celui-ci contient un point ?
Il n'est a première vue pas possible de sélectionner une balise par la valeur de son attribut id si celui-ci contient un point.
Cibler une balise HTML par son id s'il contient un point est impossible
Impossible de faire : On ne peut pas cibler la balise HTML suivante :
<div id="main.example">...</div>
avec le sélecteur CSS suivant :
div#main.example { /* ... */ }
parce que la partie située après le point, à savoir example, est interprétée non pas comme la suite du nom de l'id, mais comme une valeur d'attribut class.
La solution pour les id contenant des points sont le \ et le \\
La solution pour cibler un id ou une classe contenant le caractère . est simple, il suffit de l'échapper avec le caractère \ en CSS et les caractères \\ avec jQuery.
Cibler une balise HTML par son id s'il contient un point est possible avec le BackSlash
Il faut faire : On peut cibler la balise HTML suivante,
<div id="main.example">...</div>
avec le sélecteur CSS suivant :
div#main\.example { /* ... */ }
ou le sélecteur jQuery suivant :
$("div#main\\.example");
Notez bien qu'en CSS on utilise un BackSlash \ alors qu'avec jQuery il faut également échapper le caractère échappement d'où deux BackSlash \\.