C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

.class ou #id : lequel choisir ?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Teal
Invité




.class ou #id : lequel choisir ?


Informations générales

Description :
Ici, nous allons répondre définitivement à cette question que vous vous posez à chaque fois que vous codez en HTML/CSS : faut-il que je mette un identifiant ou une classe sur cet élément ?

La réponse n'est pas forcément évidente et le choix est souvent fait "au pif", selon votre humeur du moment. Voici donc tout ce qu'il faut savoir pour ne plus se poser de questions et ne jamais se tromper.

Démo :
Survolez les éléments pour découvrir classes et id

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Teal le 01/12/2010 | Validé par Espeon

Mise(s) à jour :
Mise à jour le 24/09/2012 par Espeon

Le tutoriel


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:
 

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 ?:
 

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 ?:
 

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 ?:
 

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 ? Rolling Eyes), 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 ?:
 

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 :

ClasseIdentifiant
Dans le HTML<div class="maClasse">
...
</div>
<div id="monIdentifiant">
...
</div>
Sélecteur (CSS, JS).maClasse#monIdentifiant
CaractéristiquePeut être appliqué à un nombre illimité d'éléments sur la même pageNe peut être appliqué qu'à un seul élément dans la page
Par élémentUn élément peut avoir autant de classes que voulu :
class="maClasse1 maClasse2 ..."
Un élément ne peut avoir qu'un seul identifiant :
id="monIdentifiant"
CombinaisonOn 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 !
MessageSujet: .class ou #id : lequel choisir ?   Mer 01 Déc 2010, 11:28
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



FAQ



Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide dans l'Aide CSS&HTML


MessageSujet: Re: .class ou #id : lequel choisir ?   Jeu 27 Sep 2012, 04:41
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



27/09/2012 - Tutoriel revu/refondu en profondeur et mis à jour


MessageSujet: Re: .class ou #id : lequel choisir ?   Jeu 27 Sep 2012, 04:42
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: .class ou #id : lequel choisir ?   
Revenir en haut Aller en bas
 

.class ou #id : lequel choisir ?

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Que se passe t'il ??et lequel choisir svp ? ( résolu )
» thème !!?lequel choisir?
» gps et geocaching, lequel choisir ???
» Lequel choisir? Dakota 20 ou Etrex 20?
» 660 contre 220

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit