Une Expérience Amusante avec Les Sélecteurs id et class

Dans la feuille de style interne, on crée un sélecteur d'id #TitBoite et un sélecteur de class .TitBoite, les deux sélecteurs ont donc le même nom. On confère à ces deux sélecteurs les mêmes propriétés qui sont les suivantes :

Dans la ligne ci-dessous, ont applique le sélecteur de class ".TitBoite" à trois balises différentes <p>, <div> et <span> et l'on peut constater que ces trois éléments ont un aspect identique, c'est le rôle normal du sélecteur de class.

Bizarre, la balise <span> qui est une balise en ligne a un comportement de bloc et adopte une hauteur et une largeur identiques celles des balises voisines, sans que l'on ait spécifié la propriété display:block.

< p class="TitBoite" style="margin-left:0;" >
bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>

<div class="TitBoite">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>

<span class="TitBoite">
bla bla bla bla bla bla bla bla bla bla bla bla bla Bla </span>

Plus surprenant dans la ligne ci-après, si l'on répète la même expérience sur les trois balises distinctes <p>, <div> et <span> mais cette fois avec le sélecteur d'id #TitBoite, on peut constater que le résultat est parfaitement identique. Cela fonctionne même avec la balise en ligne <span>!

< p id="TitBoite" style="margin-left:0;" >
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

<div id="TitBoite">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

<span id="TitBoite"">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>

D'abord, on constate que donner le même nom à un sélecteur de class et à un sélecteur d'id , ne pose pas de problème, c'est logique ce ne sont pas les mêmes objets.

Ce n'est pourtant pas une pratique à conseiller, car cela risque de poser des problèmes d'identification dans la feuille de style et de confusions d'usage, mais il n'est pas inintéressant de savoir que si par une étourderie quelconque vous commettez ce type d'erreur cela ne met pas en péril votre page.

Ensuite, on constate qu'a priori et contrairement à ce qui est répété dans tous les bons tutoriels et manuels, un sélecteur d'id peut être utilisé plusieurs fois dans la même page et même avec des balises différentes. Le sélecteur d'id se comporte donc ici comme un sélecteur de class.

Mais une des vocations des sélecteurs d'id étant de pouvoir être le destinataire de liens, vous comprendrez bien sûr que si l'on veut créer un lien sur le sélecteur d'id #TitBoite le navigateur risque d'avoir du mal à s'y retrouver!!!

FIN DE L'EXPÉRIENCE!!!