html id et class les différences

id et class sont les deux sélecteurs de la norme CSS.

Ce qu'il faut savoir :
* un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
* une classe peut désigner plusieurs objets identiques.
* un id s'utilise pour créer des ancres.
Ils permettent de cibler précisément l'application d'un ensemble de règles de style.

id définit un élément de manière unique dans l'ensemble des balises : un document HMTL valide ne devrait ainsi pas comporter deux éléments avec le même id. De fait, id est le sélecteur idéal pour positionner un élément puisque deux éléments ne devraient logiquement pas avoir la même position dans l'interface. (bon sang mais c'est bien sûr !...)

class, de son coté, est utile pour définir toutes sortes de comportements, et plusieurs éléments peuvent utiliser la même class (voire même utiliser plusieurs classes).

Enfin, une balise peut avoir un id et une (ou plusieurs) class - et id disposant d'une préséance sur class, il peut permettre de préciser un élément particulier au sein d'un ensemble de class.
Ajoutons que JavaScript peut manipuler les balises avec un id.

Nota bene : au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom).

Quelques exemples :


		<style type='text/css'> 

		  .texteVert { ... }

		  .texte { ... }

		  .vert { ... }

		  p.gras { ... }

		  .menu { ... }


		  .fond { ... }

		  #titre { ... }

		  #menuGauche { ... }

		  #menuDroite { ... }

		</style> 


		

		<div class="texteVert"></div>

		<p id="titre" class="texteVert"></p>

		<div id="menuGauche" class="menu"></div>

		<div id="menuDroite" class="menu"></div>

Warning: include(/footer.php): failed to open stream: No such file or directory in /var/www/sda/2/2/latarteauchips/html/html-id-class.php on line 72

Warning: include(): Failed opening '/footer.php' for inclusion (include_path='/var/www/sda/2/2/latarteauchips/include:.:/usr/php5.6.34/lib/php') in /var/www/sda/2/2/latarteauchips/html/html-id-class.php on line 72