classe div vs id

Utilisez id pour identifier les éléments qui ne seront présents qu’une seule instance sur une page. Par exemple, si vous avez une seule barre de navigation que vous placez dans un emplacement spécifique, utilisez id="navigation" .

Utilisez class pour grouper les éléments qui se comportent tous d’une certaine manière. Par exemple, si vous souhaitez que le nom de votre entreprise apparaisse en gras dans le corps du texte, vous pouvez utiliser .

La chose la plus importante à comprendre est que les identifiants doivent être uniques: un seul élément avec un identifiant donné doit exister dans une page. Ainsi, si vous souhaitez vous référer à un élément de page spécifique, c’est souvent la meilleure chose à faire.

Si vous avez plusieurs éléments similaires, vous devez utiliser la classe elements pour les identifier.

Un fait très utile, étonnamment peu connu, est que vous pouvez réellement appliquer plusieurs classes à un seul élément en mettant des espaces entre les noms de classes. Ainsi, si vous avez posté une question écrite par l’utilisateur actuellement connecté, vous pouvez l’identifier avec

.

Pensez à l’université.

Les cartes d’étudiant sont distinctes. Deux étudiants sur le campus n’auront pas la même carte d’étudiant. Cependant, de nombreux étudiants peuvent et vont partager au moins un cours entre eux.

Il est acceptable de mettre plusieurs étudiants sous un seul titre, Biology 101. Mais il n’est jamais acceptable de placer plusieurs étudiants sous une même carte .

Lorsque vous donnez des règles au système d’interphonie scolaire, vous pouvez donner des règles à un cours:

“Est-ce que le cours de biologie porterait des chemises rouges demain?”

 .BiologyClass { shirt-color:red; } 

Ou vous pouvez donner des règles à un étudiant spécifique en appelant son identifiant unique:

“Jonathan Sampson voudrait-il porter une chemise verte demain?”

 #JonathanSampson { shirt-color:green; } 

Les identifiants doivent être uniques, mais en CSS, ils sont également prioritaires pour déterminer laquelle des deux instructions contradictoires à suivre.

 
Text 

 #section {font-color:#fff} .section {font-color:#000} 

Le texte serait blanc.

les classes sont excellentes lorsque vous souhaitez appliquer des styles similaires à de nombreux éléments ou divs différents. Les identifiants sont corrects lorsque vous souhaitez adresser un élément spécifique pour le formatage ou la mise à jour avec JavaScript.

Un autre avantage à utiliser un ID est la possibilité de le cibler dans une balise d’ancrage:

 
Product I'm selling 

Vous permettra d’accéder à un autre endroit directement sur cet endroit:

 the Current Sale 

Une utilisation courante serait de donner à chaque titre sur un blog un identifiant de date (par exemple, id = “date20080408”) qui vous permettrait de cibler spécifiquement cette section de la page du blog.

Il est également important de se rappeler que les règles de dénomination des identifiants sont plus restreintes, principalement parce qu’elles ne peuvent pas commencer par un numéro. Voir une question similaire SO: Quelle est une valeur valide pour les atsortingbuts id dans html?

La norme HTML elle-même répond à votre question:

Deux objects ne peuvent pas avoir le même identifiant, mais une quantité arbitraire d’objects peut avoir la même classe.

Donc, si vous souhaitez appliquer certains atsortingbuts de style CSS à une seule DIV uniquement, cela serait un ID. Si vous voulez que certains atsortingbuts de style s’appliquent à plusieurs DIV, cela doit être une classe.

Notez que vous pouvez mélanger les deux. Vous pouvez faire en sorte que deux DIV appartiennent à la même classe, mais leur donner des identifiants différents. Vous pouvez ensuite appliquer le style commun à la fois à la classe et aux éléments spécifiques à l’une d’elles. Le navigateur appliquera d’abord le style de classe, puis le style d’ID, afin que les styles d’ID puissent écraser n’importe quelle classe définie auparavant.

Quelques autres choses à garder à l’esprit:

• Lorsque vous utilisez ASP.Net, vous n’avez pas de contrôle complet sur l’ID des éléments, vous devez donc utiliser la classe (notez que c’est moins vrai qu’auparavant).

• Il est préférable de ne l’ utiliser ni quand vous pouvez l’aider. Au lieu de cela, spécifiez le type d’élément et son type parent . Par exemple, une liste non ordonnée contenue dans div avec la classe navarea peut être distinguée de la manière suivante:

   div.NavArea ul { /* styles go here */ } 

Maintenant, vous pouvez définir la division logique pour une grande partie de votre zone de navigation avec une application de classe.

Les identifiants doivent être uniques. Les classes doivent être partagées. Donc, si vous avez un formatage CSS qui sera appliqué à plusieurs DIV, utilisez une classe. Si un seul (comme exigence, pas comme une circonstance), utilisez un identifiant.

Je pense que nous soaps tous ce qu’est la classe, mais si vous considérez les identifiants comme des identifiants plutôt que comme des outils de style, vous ne vous tromperez pas. Vous avez besoin d’un identifiant lorsque vous tentez de cibler quelque chose et si vous avez plus d’un article avec le même identifiant, vous ne pouvez plus l’identifier …

Quand il s’agit d’écrire votre css pour les identifiants et les classes, il est avantageux d’utiliser les classes css minimales et d’essayer de ne pas avoir à gérer les identifiants tant que vous ne l’auriez pas fait. bientot un fichier css plein de! important.

Où utiliser un identifiant par rapport à une classe

La simple différence entre les deux est que, même si une classe peut être utilisée à plusieurs resockets sur une page, un identifiant ne doit être utilisé qu’une seule fois par page. Par conséquent, il est approprié d’utiliser un identifiant sur l’élément div qui marque le contenu principal de la page, car il n’y aura qu’une seule section de contenu principale. En revanche, vous devez utiliser une classe pour définir des couleurs de lignes alternées sur une table, car elles seront par définition utilisées plus d’une fois.

Les identifiants sont un outil incroyablement puissant. Un élément avec un ID peut être la cible d’un morceau de JavaScript qui manipule l’élément ou son contenu d’une certaine manière. L’atsortingbut ID peut être utilisé comme cible d’un lien interne, en remplaçant les balises d’ancrage par des atsortingbuts de nom. Enfin, si vous rendez vos identifiants clairs et logiques, ils peuvent servir de «document d’auto-documentation» dans le document. Par exemple, vous n’avez pas nécessairement besoin d’append un commentaire avant un bloc indiquant qu’un bloc de code contiendra le contenu principal si la balise d’ouverture du bloc a un ID, par exemple, “main”, “header”, “footer” “, etc.

Si vous souhaitez utiliser un style à plusieurs endroits sur une page, utilisez une classe. Si vous voulez beaucoup de personnalisation pour un seul object, par exemple une barre de navigation sur le côté de la page, un identifiant est préférable, car il est peu probable que vous ayez besoin de cette combinaison de styles ailleurs.

id est supposé être l’identifiant unique de l’élément sur la page, ce qui aide à le manipuler. Tout style externe défini par CSS et censé être utilisé dans plus d’un élément doit être atsortingbué à l’atsortingbut de classe

Utilisez un identifiant pour un élément unique sur la page avec lequel vous voulez faire quelque chose de très spécifique, et une classe pour quelque chose que vous pourriez réutiliser sur d’autres parties de la page.

L’atsortingbut id est utilisé pour que les éléments les identifient de manière unique dans le document, tandis que l’atsortingbut class peut avoir la même valeur partagée par de nombreux éléments du même document.

Donc, vraiment, s’il y a un seul élément par document qui va utiliser le style (par exemple, #title), alors allez avec id . Si plusieurs éléments peuvent utiliser le style, optez pour class .

Je dirais qu’il est préférable d’utiliser une classe chaque fois que vous pensez qu’un élément de style va être répété sur une page. Des éléments comme HeaderImage, FooterBar et autres vont bien comme identifiant, car vous ne l’utiliserez qu’une seule fois et cela vous évitera de le dupliquer accidentellement, car certains éditeurs vous alerteront lorsque vous aurez des ID en double.

Je peux également le voir utile si vous voulez générer les éléments div dynamicment et que vous souhaitez cibler un élément spécifique pour le formatage; vous pouvez simplement lui donner le bon identifiant à la génération plutôt que de rechercher l’élément puis mettre à jour sa classe.

Mon choix est d’utiliser l’identification de classe lorsque les styles css sont appliqués à plusieurs div de la même manière. Si la structure ou le conteneur n’est réellement appliqué qu’une seule fois ou peut hériter de son style par défaut, je ne vois aucune raison d’utiliser l’identification de classe.

Donc, cela dépend si votre div est parmi plusieurs; Par exemple, une div représentant une question à une réponse sur le site Web stackoverflow. Ici, vous voudrez définir le style de la classe “Answer” et l’appliquer à chaque div “Answer”.

Si vous utilisez des contrôles Web .Net, il est parfois beaucoup plus simple d’utiliser des classes car .Net modifie les identifiants de contenu Web au moment de l’exécution (où ils utilisent runat = “server”).

L’utilisation de classes vous permet de créer facilement des styles avec des classes séparées pour les fonts, l’espacement, les bordures, etc. J’utilise généralement plusieurs fichiers pour stocker différents types d’informations de formatage: basic_styles.css pour un formatage simple, ie6_styles.css (dans ce cas, IE6) etc et template_1.css pour les informations de mise en page.

Quelle que soit la manière que vous choisissez, essayez d’être cohérent pour faciliter l’entretien.

De même, un élément auquel vous atsortingbuez un identifiant spécifique peut être manipulé via les commandes JavaScript et DOM – GetElementById, par exemple.

En général, je trouve utile de donner à toutes les principales divisions structurelles un identifiant – même si au départ, je n’ai pas de règles CSS spécifiques à appliquer, j’ai cette possibilité pour le futur. D’un autre côté, j’utilise des classes pour les éléments qui pourraient être utilisés plusieurs fois – par exemple, une div contenant une image et une légende – je pourrais avoir plusieurs classes, chacune avec des valeurs de style légèrement différentes.

Rappelez-vous cependant que toutes les choses étant égales par ailleurs, les règles de style dans une spécification d’identification ont priorité sur celles des spécifications de classe.

Outre le fait que les identifiants et les classes sont parfaits pour définir un style sur un object ou un ensemble similaire d’éléments, il y a également une autre réserve à retenir. Cela dépend aussi de la langue dans une certaine mesure. Dans ASP.Net, vous pouvez lancer des Div et avoir des identifiants. Mais si vous utilisez un Panel au lieu de Div, vous perdrez l’identifiant.

Les classes sont pour les styles que vous pouvez utiliser plusieurs fois sur une page, les ID sont des identificateurs uniques qui définissent des cas particuliers pour les éléments. Les normes indiquent que les identifiants ne doivent être utilisés qu’une fois dans une page. Vous devez donc utiliser les classes lorsque vous souhaitez utiliser un style sur plusieurs éléments d’une page, et un ID lorsque vous souhaitez simplement l’utiliser une fois.

Une autre chose est que pour les classes, vous pouvez utiliser plusieurs valeurs (en mettant des espaces entre chaque classe, à la “class = ‘blagh blah22 blah’) avec des ID, vous ne pouvez utiliser que des identifiants par élément.

Les styles définis pour les ID remplacent les styles définis pour les classes. Par conséquent, les parameters de style de #uniquething remplacent le style de .whatever si les deux conflits se produisent.

Vous devriez donc probablement utiliser des identifiants pour des choses comme l’en-tête, votre «sidebar» ou autre, et ainsi de suite – des choses qui n’apparaissent qu’une seule fois par page.

Pour moi: Si vous utilisez des classes lorsque je vais faire quelque chose en CSS ou append un nom aux éléments et que je peux utiliser tous les éléments d’une page.

Donc, les identifiants que j’utilise pour un élément unique

Ex:

CSS:

 .clear {clear:both;} .black {color:black;} .bold {font-weight:bold;} .radius {border-radius:2px;}