Quelle est la différence entre un identifiant et une classe?

Quelle est la différence entre <div class="">et <div id="">quand il s'agit de CSS? Est-il correct d'utiliser <div id="">?

Je vois différents développeurs faire cela dans les deux sens, et comme je suis autodidacte, je ne l'ai jamais vraiment compris.

idsdoit être unique là où cela classpeut être appliqué à beaucoup de choses. En CSS, idles éléments ressemblent #elementIDet les classéléments ressemblent.someClass

En général, utilisez-le idlorsque vous voulez faire référence à un élément spécifique et classlorsque vous avez un certain nombre de choses qui se ressemblent toutes. Par exemple, communs idéléments sont des choses comme header, footer, sidebar. Les classéléments communs sont des choses comme highlightou external-link.

C'est une bonne idée de lire sur la cascade et de comprendre la priorité attribuée aux différents sélecteurs: http://www.w3.org/TR/CSS2/cascade.html

Cependant, la priorité la plus élémentaire que vous devez comprendre est que les idsélecteurs ont priorité sur les classsélecteurs. Si vous aviez ceci:

<p id="intro" class="foo">Hello!</p>

et:

#intro { color: red }
.foo { color: blue }

Le texte serait rouge car le idsélecteur a priorité sur le classsélecteur.

Peut-être qu'une analogie aidera à comprendre la différence:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Étudiant ID cartes sont distinctes. Deux étudiants sur le campus n'auront pas la même carte d' identité d' étudiant . Cependant, de nombreux étudiants peuvent partager et partageront au moins une classe entre eux.

Il est normal de mettre plusieurs étudiants sous un même titre de classe , comme Biologie. Mais il n'est jamais acceptable de mettre plusieurs étudiants sous une seule carte d' étudiant .

Lorsque vous donnez des règles sur le système d'interphone de l'école, vous pouvez donner des règles à une classe :

"Demain, tous les étudiants doivent porter une chemise rouge pour le cours de biologie."

.Biology {
  color: red;
}

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

"Jonathan Sampson doit porter une chemise verte demain."

#JonathanSampson {
  color: green;
}

Dans ce cas, Jonathan Sampson reçoit deux commandes: l'une en tant qu'étudiant dans la classe de biologie et l'autre en tant qu'exigence directe. Parce que Jonathan a été informé directement, via l'attribut id, de porter une chemise verte, il ne tiendra pas compte de la demande antérieure de porter une chemise rouge.

Les sélecteurs plus spécifiques gagnent.

Où utiliser un ID par rapport à une classe

La différence simple entre les deux est que même si une classe peut être utilisée à plusieurs reprises sur une page, un ID ne doit être utilisé qu'une seule fois par page. Par conséquent, il convient d'utiliser un ID sur l'élément div qui marque le contenu principal de la page, car il n'y aura qu'une seule section de contenu principal. En revanche, vous devez utiliser une classe pour configurer des couleurs de ligne 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 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 rendez vos identifiants clairs et logiques, ils peuvent servir comme une sorte «d'auto-documentation» dans le 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, disons, "principal", "en-tête", "pied de page ", etc.

Un identifiant doit être unique sur toute la page.

Une classe peut s'appliquer à de nombreux é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 un div avec un id

<div id = "footer" class = "...">

et j'ai encore une classe

Une CLASSE doit être utilisée pour plusieurs éléments pour lesquels vous voulez le même style. Un ID doit être pour un élément unique. Voir ce tutoriel .

Vous devez vous référer aux normes W3C si vous voulez être un conformiste strict, ou si vous voulez que vos pages soient validées aux normes.

Les identifiants sont uniques. Les classes 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 ID, vous pouvez utiliser une classe à la place. L'inverse n'est pas vrai.

La convention semble être d'utiliser des ID pour les éléments de page qui se trouvent sur chaque page (comme "navbar" ou "menu") et les classes pour tout le reste, mais ce n'est qu'une convention et vous constaterez une grande variabilité d'utilisation.

Une autre différence est que pour les éléments d'entrée de formulaire, l' <label>élément fait référence à un champ par ID, vous devez donc utiliser des ID si vous comptez les utiliser <label>. est une chose d'accessibilité et vous devriez vraiment l'utiliser.

Autrefois, les identifiants étaient également préférés car ils sont facilement accessibles en Javascript (getElementById). Avec l'avènement de jQuery et d'autres frameworks Javascript, ce n'est plus un problème maintenant.

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 ce même ID. Les ID sont utilisés pour appliquer des styles uniques à un élément HTML.

J'utilise les identifiants et les classes 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 stylisées via #header et #content. Chaque section du contenu peut être appliquée selon un style commun via #content .section. Juste pour les coups de pied, j'ai ajouté une classe "spéciale" pour la section du milieu. Supposons que vous vouliez qu'une section particulière ait un style spécial. Cela peut être réalisé avec la classe .special, mais la section hérite toujours des styles courants de #content .section.

Lorsque je fais du développement JavaScript ou CSS, j'utilise généralement des identifiants pour accéder à / manipuler un élément HTML très spécifique, et j'utilise des classes pour accéder / appliquer des styles à une large gamme d'éléments.

CSS est orienté objet. L'ID indique l'instance, la classe indique la classe.

Lorsque vous appliquez CSS, appliquez-le à une classe et essayez d'éviter autant que possible à un identifiant. L'ID ne doit être utilisé qu'en JavaScript pour récupérer l'élément ou pour toute liaison d'événement.

Les classes doivent être utilisées pour appliquer CSS.

Parfois, vous devez utiliser des classes pour la liaison d'événements. Dans de tels cas, essayez d'éviter les classes qui sont utilisées pour appliquer CSS et ajoutez plutôt de nouvelles classes qui n'ont pas de CSS correspondant. Cela vous aidera lorsque vous aurez besoin de changer le CSS pour n'importe quelle classe ou de changer le nom de classe CSS tous ensemble pour n'importe quel élément.

L'espace de sélection CSS permet en fait un style d'ID conditionnel:

h1#my-id {color:red}
p#my-id {color:blue}

restituera comme prévu. Pourquoi voudriez-vous faire cela? Parfois, les ID sont générés dynamiquement, etc. Une autre utilisation a été de rendre les titres différemment en fonction d'une attribution d'ID 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 des identifiants imbriqués pour différencier le traitement est un peu perverse. Sachez simplement que lorsque les développeurs du monde Sass / SCSS mettent la main sur ce genre de choses, les ID imbriqués deviennent la norme.

Enfin, en ce qui concerne les performances et la priorité du sélecteur, l'ID a tendance à l'emporter. C'est un tout autre sujet.

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 de nombreuses réponses, plusieurs divs auraient besoin du même style et vous utiliseriez une classe.

Un identifiant fait référence à un seul élément, par exemple, la section associée à droite peut avoir un style spécifique qui n'est pas réutilisé ailleurs, il utiliserait un identifiant.

Techniquement, vous pouvez utiliser des classes pour tout cela, ou les répartir logiquement. Cependant, vous ne pouvez pas réutiliser les identifiants pour plusieurs éléments.

La classe consiste à appliquer votre style à un groupe d'éléments. Les styles d'ID s'appliquent uniquement à l'élément avec cet ID (il ne doit y en avoir qu'un). Habituellement, vous utilisez des classes, mais s'il y en a une, vous pouvez utiliser des ID (ou simplement coller le style directement dans l'élément).

Dans les identifiants de développement avancés, nous pouvons essentiellement utiliser JavaScript.

À des fins reproductibles, les classes sont utiles contrairement aux identifiants qui sont supposés être uniques.

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>

Vous pouvez maintenant voir ici boxet box1sont deux (2) <div>éléments différents , mais nous pouvons appliquer les classes boxet bg-color-redà chacun d'eux.

Le concept est l'héritage dans un langage OOP .

1) div id n'est pas réutilisable et ne devrait être appliqué qu'à un seul élément de HTML tandis que la classe div peut être ajoutée à plusieurs éléments.

2) Un identifiant a une plus grande 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) L'élément Style fait toujours référence à une classe div en mettant a. (point) devant leurs noms tandis que la classe div id est référencée en mettant un # (hachage) devant leurs noms.

4) Exemple: -

classe dans la <style>déclaration -.red-background { background-color: red; }

id dans la <style>déclaration - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Ici le fond sera de couleur bleue

idet classsont deux attributs HTML global / standard (les attributs globaux ci-dessous peuvent être utilisés sur n'importe quel élément HTML.)

class Spécifie un ou plusieurs noms de classe pour un élément (fait référence à une classe dans une feuille de style)

id Spécifie un identifiant unique pour un élément

Les attributs id donnent un identifiant unique à l'échelle du document élémentaire où l'attribut class fournit un moyen de classer les éléments similaires.

La valeur d'attribut id doit être unique sur la page HTML où l'attribut de classe peut être réutilisé partout où vous souhaitez appliquer les mêmes propriétés

La classe est utilisée pour plusieurs éléments qui ont des attributs communs. Par exemple, si vous voulez la même couleur et la même police pour les balises p et body, utilisez l'attribut class ou dans une division elle-même.

L'ID, d'autre part, est utilisé pour mettre en surbrillance les attributs d'un élément unique et utilisé exclusivement pour un élément particulier uniquement.Par exemple, nous avons une balise h1 avec certains attributs que nous ne voudrions pas qu'ils répètent dans d'autres éléments de la page.

Il convient de noter que si nous utilisons à la fois class et id dans un élément, * id remplace les attributs de classe. * Tout simplement parce que id est exclusivement pour un seul élément

Reportez-vous à l'exemple ci-dessous

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Nous générons la sortie

Production