Quelle est la différence entre un identifiant et une classe?
Quelle est la différence entre <div class=""> et <div id=""> en matière de CSS? Est-ce correct d'utiliser <div id="">?
Je vois différents développeurs faire cela de deux manières, et depuis que je suis autodidacte, je ne l'ai jamais vraiment compris.
ids doit être unique là où class peut être appliqué à beaucoup de choses. En CSS, ids ressemble à #elementID et les éléments class ressemblent à .someClass
En général, utilisez id chaque fois que vous souhaitez faire référence à un élément spécifique et class lorsque vous avez un certain nombre d'éléments identiques. Par exemple, les éléments id communs sont des éléments tels que header, footer, sidebar. Les éléments class communs sont des éléments tels que highlight ou external-link.
C'est une bonne idée de lire la cascade et de comprendre la priorité attribuée aux différents sélecteurs: http://www.w3.org/TR/CSS2/cascade.html
La priorité la plus élémentaire que vous devez comprendre, cependant, est que les sélecteurs id ont priorité sur les sélecteurs class. Si vous aviez ceci:
<p id="intro" class="foo">Hello!</p>
et:
#intro { color: red }
.foo { color: blue }
Le texte serait rouge car le sélecteur id a priorité sur le sélecteur class.
Peut-être qu'une analogie aidera à comprendre la différence:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
Les cartes d'étudiant ID sont distinctes. Deux étudiants sur le campus n'auront la même carte d'étudiant ID. Cependant, de nombreux étudiants peuvent et vont partager au moins un Classe l'un avec l'autre.
Ce n'est pas grave de placer plusieurs étudiants sous un même titre Classe, tel que Biologie. Mais il n'est jamais acceptable de placer plusieurs étudiants sous un seul étudiant ID.
Lorsque vous donnez Règles sur le système d'interphone de l'école, vous pouvez donner Règles à un Classe:
"Demain, tous les étudiants porteront une chemise rouge au cours de biologie."
.Biology {
color: red;
}
Ou vous pouvez donner des règles à un étudiant spécifique en appelant son unique ID:
"Jonathan Sampson doit porter une chemise verte demain."
#JonathanSampson {
color: green;
}
Dans ce cas, Jonathan Sampson reçoit deux commandes: une en tant qu'étudiant en biologie et une autre en tant qu'exigence directe. Comme il a été dit directement à Jonathan, via l'attribut id, de porter une chemise verte, il ignorera la demande antérieure de porter une chemise rouge.
Les sélecteurs plus spécifiques gagnent.
Où utiliser un identifiant par rapport à une classe
La différence simple entre les deux réside dans le fait qu’une classe peut être utilisée de manière répétée sur une page mais qu’un identifiant ne doit être utilisé qu’une fois par page. Par conséquent, il convient 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 élément de JavaScript qui manipule l'élément ou son contenu d'une manière ou d'une autre. L'attribut ID peut être utilisé comme cible d'un lien interne, remplaçant les balises d'ancrage par des attributs de nom. Enfin, si vous définissez clairement et logiquement vos identifiants, ils peuvent constituer une sorte de «documentation personnelle» au sein du document. Par exemple, vous n'avez pas nécessairement besoin d'ajouter 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 de, par exemple, "principal", "en-tête", "pied de page". ", etc.
Un identifiant doit être unique dans toute la page.
Une classe peut s'appliquer à plusieurs éléments.
Parfois, c'est une bonne idée d'utiliser des identifiants.
Dans une page, vous avez généralement un pied de page, un en-tête ...
Ensuite, le pied de page peut être dans une div avec un identifiant
<div id = "footer" class = "...">
et toujours une classe
Une classe doit être utilisée pour plusieurs éléments pour lesquels vous souhaitez un même style. Un ID devrait être pour un élément unique. Voir ce tutorial .
Vous devriez vous référer aux standards du W3C si vous voulez être un strict conformiste ou si vous voulez que vos pages soient validées aux standards.
CSS est orienté objet. ID dit instance, classe dit classe.
Les identifiants sont uniques. Les cours ne le sont pas. Les éléments peuvent également avoir plusieurs classes. Des classes peuvent également être ajoutées et supprimées dynamiquement à un élément.
Partout où vous pouvez utiliser un identifiant, vous pouvez utiliser une classe à la place. L'inverse n'est pas vrai.
La convention semble consister à utiliser des identifiants pour les éléments de page présents sur chaque page (comme "barre de navigation" ou "menu") et des classes pour tout le reste, mais ce n'est qu'une convention et vous constaterez une grande variabilité dans l'utilisation.
Une autre différence est que pour les éléments de saisie de formulaire, l'élément <label> fait référence à un champ par ID. Vous devez donc utiliser des ID si vous souhaitez utiliser <label>. est une chose d'accessibilité et vous devriez vraiment l'utiliser.
Autrefois, les identifiants étaient également préférés car ils étaient facilement accessibles en Javascript (getElementById). Avec l’avènement de jQuery et d’autres frameworks Javascript, ceci n’est pratiquement plus un problème.
Les classes sont comme des catégories. De nombreux éléments HTML peuvent appartenir à une classe et un élément HTML peut avoir plusieurs classes. Les classes sont utilisées pour appliquer des styles généraux ou des styles pouvant être appliqués à plusieurs éléments HTML.
Les identifiants sont des identifiants. Ils sont uniques personne d'autre n'est autorisé à avoir le même identifiant. Les ID sont utilisés pour appliquer des styles uniques à un élément HTML.
J'utilise les identifiants et les cours de cette manière:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
Dans cet exemple, les sections d'en-tête et de contenu peuvent être stylées via #header et #content. Chaque section du contenu peut être appliquée à un style commun par le biais de la section #content. Juste pour le plaisir, j'ai ajouté une classe "spéciale" pour la section centrale. Supposons que vous souhaitiez qu'une section particulière ait un style particulier. Cela peut être réalisé avec la classe .special, mais la section hérite toujours des styles courants de #content .section.
Lorsque je développe en JavaScript ou CSS, j'utilise généralement des identifiants pour accéder à/manipuler un élément HTML très spécifique, et des classes pour accéder/appliquer des styles à une large gamme d'éléments.
Lorsque vous appliquez CSS, appliquez-le à une classe et essayez d'éviter autant que possible un id. L'ID doit uniquement être utilisé en JavaScript pour extraire l'élément ou pour toute liaison d'événement.
Les classes doivent être utilisées pour appliquer le CSS.
Parfois, vous devez utiliser des classes pour la liaison d'événement. Dans ce cas, essayez d’éviter les classes utilisées pour l’application de CSS et ajoutez plutôt de nouvelles classes sans CSS correspondant. Cela viendra vous aider lorsque vous aurez besoin de changer le CSS pour une classe ou de changer le nom de la classe CSS pour un élément.
L'espace de sélection CSS permet en fait d'utiliser un style d'id conditionnel:
h1#my-id {color:red}
p#my-id {color:blue}
rendra comme prévu. Pourquoi voudriez-vous faire cela? Parfois, les identifiants sont générés de manière dynamique, etc. Une autre utilisation a été de rendre les titres différemment en fonction d'une affectation d'identifiant de haut niveau:
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
Personnellement, je préfère les sélecteurs de nom de classe plus longs:
body#list-page .title-block > h1 {font-size:56px}
car je trouve que l'utilisation d'identifiants imbriqués pour différencier les traitements est un peu perverse. Sachez simplement qu'en tant que développeurs dans le monde Sass / SCSS mettent la main sur tout cela, les ID imbriqués deviennent la norme.
Enfin, en ce qui concerne les performances et la priorité du sélecteur, ID a tendance à gagner. C'est un tout autre sujet.
La classe est pour appliquer votre style à un groupe d'éléments. Les styles d'identifiant s'appliquent uniquement à l'élément portant cet identifiant (il ne doit en exister qu'un seul). Habituellement, vous utilisez des classes, mais s'il existe une seule option, vous pouvez utiliser des identifiants (ou simplement coller le style directement dans l'élément).
Tout élément peut avoir une classe ou un identifiant.
Une classe est utilisée pour référencer un certain type d'affichage. Par exemple, vous pouvez avoir une classe CSS pour un div qui représente la réponse à cette question. Comme il y aura beaucoup de réponses, plusieurs divs auraient besoin du même style et vous utiliseriez une classe.
Un identifiant ne fait référence qu'à un seul élément. Par exemple, la section associée de droite peut avoir un style spécifique qui n'est pas réutilisé ailleurs. Elle utilise un identifiant.
Techniquement, vous pouvez utiliser des classes pour tout cela ou les séparer de manière logique. Cependant, vous ne pouvez pas réutiliser les identifiants pour plusieurs éléments.
En développement avancé, id s, nous pouvons utiliser essentiellement JavaScript.
Pour des raisons répétables, class es est pratique contrairement à id s qui est supposé être unique.
Voici un exemple illustrant les expressions ci-dessus:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
Maintenant, vous pouvez voir ici que box et box1 sont deux (2) éléments <div> différents, mais nous pouvons appliquer les classes box et bg-color-red à chacun d'eux.
Le concept est l'héritage dans un OOP langage.
1) div id n'est pas réutilisable et ne devrait être appliqué qu'à un seul élément de HTML, tandis que div class peut être ajouté à plusieurs éléments.
2) Un identifiant a plus d'importance si les deux sont appliqués au même élément et ont des styles en conflit, les styles de l'identifiant seront appliqués.
3) Un élément de style fait toujours référence à une classe div en mettant un. (point) devant leurs noms tandis que div id class est référencé en mettant un # (hash) devant leurs noms.
4) Exemple: -
classe dans la déclaration
<style>-.red-background { background-color: red; }id dans
<style>declaration -#blue-background {background-color: blue;}
<div class="red-background" id="blue-background">Hello</div>Ici le fond sera de couleur bleue