Introduction
Ce tutoriel a donc pour but de bien vous faire comprendre la différence qui existe entre une
classe et un
identifiant. Ce sont les bases de la mise en forme de vos pages web (ou de votre forum) car elles permettent au CSS et au Javascript de cibler vos éléments afin de les modifier (styliser dans le cas du CSS).
En effet, le CSS n'est rien d'autre qu'un ensemble de
valeurs que prennent un certain nombre de
propriétés correspondant à un
sélecteur en particulier. Et ce sélecteur va souvent faire intervenir classe ou identifiant.
- Organisation d'un code CSS:
- Code:
-
sélecteur {
propriété: valeur;
}
C'est pour cela qu'il est essentiel de bien comprendre et maîtriser ces deux notions. Mais rassurez-vous, c'est vraiment très très simple ! Étudions cela de plus près...
A propos des sélecteurs
Je pourrais m'étendre plus longuement sur les sélecteurs. Vous remarquerez par exemple (et c'est une bonne chose que de le comprendre) que les sélecteurs sont identiques en CSS et en Javascript. En fait, il s'agit de quelque chose d'indépendant de ces deux langages, qu'on appelle le
DOM, qui représente la structure de dépendance des éléments HTML.
Bref, vous trouverez plus de détails sur l'usage et l'utilisation avancée des sélecteurs sur le web (il y a des milliers de cours sur le CSS). Par exemple, ce cours du SdZ présente un certain nombre de sélecteurs avancés, et pointe lui-même vers LA documentation officielle (exhaustive !) que je vous conseille : le site du W3C
La classe
Une classe a pour caractéristique de
pouvoir être réutilisée autant de fois que nécessaire. Il peut y avoir 1, 2, ... 1500 classes sur la même page, ça ne pose pas de problème !
Un élément HTML peut avoir autant de classes que vous le souhaitez (0, 1 ou n), chose que certains ont tendance à oublier parfois.
- Vous n'avez pas bien compris ?:
Pour faire une analogie, prenons un groupe de personnes.
La caractéristique garçon ou fille serait une classe. Il peut y en avoir plusieurs. Par contre, tous ceux qui portent la même classe (les garçons ou les filles) ont des propriétés en commun (en CSS, on peut affecter un changement à tout ce sous-groupe).
Il peut y avoir d'autres caractéristiques, et donc nous pouvons avoir des "garçon grand", des "garçon petit", des "fille grand" et des "fille petit" par exemple.
On applique une classe à un élément HTML avec l'attribut
class de la manière suivante :
- Code:
-
<div class="maClasse1 maClasse2">...</div>
Ce qui se traduit par le sélecteur suivant :
.maClasse1 et
.maClasse2.
Donc, en CSS :
- Code:
-
.maClasse1 {
// Mes propriétés qui stylisent ma classe
}
- Et en Javascript ?:
Avec jQuery c'est super simple. Cette librairie Javascript est implémentée nativement chez ForumActif, donc vous n'avez même pas à vous poser la question. Si vous développez votre propre page web et que vous allez user de Javascript, je ne peux que vous conseiller de l'utiliser. Il s'agit de LA référence qui vous évitera bien des tracas en termes de compatibilité (rien que ça).
Quoiqu'il en soit, le sélecteur est le même que précédemment. On utilisera simplement la fonction de sélection $(), ce qui donnera : $('.maClasse1').
Comme il s'agit d'une classe, ce sélecteur récupèrera
tous les éléments qui portent cette classe. Si vous souhaitez cibler un élément unique, bien précis, peut-être vous faut-il utiliser un
identifiant sur cet élément !
Ça tombe bien, on y arrive.
L'identifiant
Un identifiant a pour caractéristique de
ne pouvoir être utilisé qu'une seule et unique fois dans la page. Comme son nom l'indique, il est là pour
identifier. Si 2 éléments ont le même identifiants sur la page, alors
c'est perdu.
- Vous n'avez pas bien compris ?:
Pour faire une analogie, prenons encore un groupe de personnes.
Pour identifier chaque personne de manière unique, le plus simple c'est de leur donner un numéro unique à chacun. Ainsi, si j'appelle le
#1, il se reconnaîtra et dira "
oui c'est moi".
Si maintenant je donne à 2 personnes le même numéro... bah vous imaginez les problèmes.
Un élément HTML ne peut avoir qu'un seul identifiant, ce qui peut paraître évident (on identifie déjà l'élément, pourquoi l'identifier une deuxième fois ?
), mais a besoin d'être
souligné.
On applique un identifiant à un élément HTML avec l'attribut
id de la manière suivante :
- Code:
-
<div id="monIdentifiant">...</div>
Ce qui se traduit par le sélecteur suivant :
#monIdentifiant.
Donc, en CSS :
- Code:
-
#monIdentifiant {
// Mes propriétés qui stylisent mon élément (unique, identifié)
}
- Et en Javascript ?:
Avec jQuery toujours, le sélecteur est le même, comme expliqué précédemment.
On utilisera simplement la fonction de sélection $(), ce qui donnera : $('#monIdentifiant').
Comme il s'agit d'un identifiant, ce sélecteur ciblera un élément unique et précis, pour peu que vous n'ayez pas fait de bêtise. C'est d'ailleurs là que l'identifiant prend son sens.
On peut combiner
classes et
identifiant sans aucun problème !
Le code suivant est parfaitement correct :
- Code:
-
<div id="monIdentifiant" class="maClasse1 maClasse2">
...
</div>
En résumé
Pour résumer, rien de tel qu'un petit tableau récapitulatif :
| Classe | Identifiant |
|---|
| Dans le HTML | <div class="maClasse">
...
</div> | <div id="monIdentifiant">
...
</div> |
|---|
| Sélecteur (CSS, JS) | .maClasse | #monIdentifiant |
|---|
| Caractéristique | Peut être appliqué à un nombre illimité d'éléments sur la même page | Ne peut être appliqué qu'à un seul élément dans la page |
|---|
| Par élément | Un élément peut avoir autant de classes que voulu :
class="maClasse1 maClasse2 ..." | Un élément ne peut avoir qu'un seul identifiant :
id="monIdentifiant" |
|---|
| Combinaison | On peut combiner classes et identifiant :
- Code:
-
<div id="monIdentifiant" class="maClasse1 maClasse2 ..."></div> |
|---|
Bonne pratique
Et pour finir sur un conseil de bonne pratique, lorsque vous vous demandez lequel choisir, dites-vous ceci :
Si vous souhaitez appliquer un style que vous allez appliquer à plusieurs éléments, ou réutiliser ailleurs, choisissez une classe.
Si vous souhaitez pouvoir identifier un élément bien précis, choisissez un identifiant.
Là encore, n'oubliez pas que les deux peuvent se combiner. Une très bonne pratique CSS est de mettre dans une classe un certain nombre de propriétés communes à différents éléments. Lorsque vous commencez à copier/coller des propriétés dans votre CSS, vous devriez vous poser la question :
est-ce-que je ne pourrais pas créer une classe pour ces propriétés ?Voilà, j'espère que ce tutoriel vous sera utile et que vous ne ferez plus jamais l'erreur !
Gare à celui qui mettra plusieurs identifiants sur une même page et viendra ensuite se plaindre que l'affichage est bizarre.
Bonne continuation, vous êtes sur la bonne voie !
Lun 03 Juin 2024, 17:20 par 
