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

Question

Quelle est la différence entre <div class=""> et <div id=""> en matière de CSS? Est-il bien utiliser <div id="">?

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

Answer 1

ids doit être unique où que class peut être appliqué à beaucoup de choses. En CSS, ids ressemblent à des éléments de #elementID et class ressembler .someClass

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

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

Toutefois, la priorité la plus fondamentale que vous devez comprendre, est que les sélecteurs de id ont priorité sur les sélecteurs de class. Si vous aviez ceci:

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

et

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

Le texte serait rouge parce que le sélecteur de id a la priorité sur le sélecteur de class.

Answer 2

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

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

ID cartes sont distinctes. Aucun deux étudiants sur le campus auront le même étudiant ID carte. Cependant, de nombreux étudiants peuvent et partageront au moins un classe avec l'autre.

Il est normal de mettre plusieurs étudiants sous un classe titre, comme la biologie. Mais il est jamais acceptable de mettre plusieurs étudiants sous un étudiant ID .

Quand on donne Règles sur le système d'interphone de l'école, vous pouvez donner Règles à classe :

  

« Demain, tous les élèves doivent porter une chemise rouge à la classe de biologie. »

.Biology {
  color: red;
}

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

  

"Jonathan Sampson est de porter une chemise verte demain."

#JonathanSampson {
  color: green;
}

Dans ce cas, Jonathan Sampson reçoit deux commandes: un comme étudiant dans la classe de biologie, et une autre comme une exigence directe. Parce que Jonathan a été dit directement, via l'attribut id, porter une chemise verte, il ne tient pas compte de la demande plus tôt pour porter une chemise rouge.

Les sélecteurs plus spécifiques gagner.

Answer 3

Où utiliser un ID par rapport à une classe

La simple différence entre les deux est que si une classe peut être utilisé de façon répétée sur une page, une carte d'identité ne doit être utilisé qu'une seule fois par page. Il est donc approprié d'utiliser une carte d'identité sur l'élément div qui est le contenu marquage sur la page principale, car il n'y aura qu'une seule section du contenu principal. En revanche, vous devez utiliser une classe pour mettre en place une alternance de couleurs de ligne sur une table, car ils sont, par définition, va être utilisé plus d'une fois.

ID 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 de son contenu d'une certaine façon. L'attribut ID peut être utilisé comme la cible d'un lien interne, en remplaçant les balises d'ancrage avec des attributs de nom. Enfin, si vous faites vos identifiants clairs et logiques, ils peuvent servir comme une sorte de « auto-documentation » dans le document. Par exemple, vous ne devez pas nécessairement ajouter un commentaire avant un bloc indiquant qu'un bloc de code contiendra le contenu principal si la balise d'ouverture du bloc a une carte d'identité, disons, « principale », « tête », « Pied de page », etc.

Answer 4

Un identifiant doit être unique dans la page.

Une classe peut demander à de nombreux éléments.

Parfois, il est une bonne idée d'utiliser ids.

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

  

et ont encore une classe

Answer 5

CLASS doit être utilisé pour plusieurs éléments que vous voulez le même style pour. ID doit être un élément unique. Voir cette tutoriel .

Vous devez vous référer à la standards du W3C si vous voulez être un strict conformistes, ou si vous voulez que vos pages soient validé aux normes.

Answer 6

ID sont uniques. Les cours ne sont pas. Les éléments peuvent aussi avoir plusieurs classes. Aussi les classes peuvent être dynamiquement ajoutés et supprimés à un élément.

vous pouvez utiliser un ID Ne importe où vous pouvez utiliser à la place une classe. L'inverse est pas vrai.

La convention semble utiliser des ID pour les éléments de page qui sont sur toutes les pages (comme « navbar » ou « menu ») et des classes pour tout le reste, mais cela est convention seulement et vous trouverez grand écart dans l'utilisation.

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

Dans les années passées ID ont également été préféré parce qu'ils sont facilement accessibles en Javascript (getElementById). Avec l'avènement de jQuery et d'autres cadres Javascript c'est à peu près un maintenant non-question.

Answer 7

Les classes sont comme catégories. De nombreux éléments HTML peuvent appartenir à une classe, et un élément HTML peut avoir plus d'une classe. Les classes sont utilisées pour appliquer des styles généraux ou des styles qui peuvent être appliqués sur plusieurs éléments HTML.

ID sont des identificateurs. Ils sont uniques; personne d'autre est autorisé à avoir cette même ID. ID sont utilisés pour appliquer des styles uniques à un élément HTML.

J'utilise les ID et les classes de cette façon:

<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 le contenu peuvent être coiffés par #header et #content. Chaque section du contenu peut être appliqué un style commun par #content .Section. Juste pour voir, j'ai ajouté une classe « spéciale » pour la partie centrale. Supposons que vous vouliez une section particulière d'avoir un style particulier. Ceci peut être réalisé avec la classe .special, mais la section hérite toujours des styles communs de #content .Section.

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

Answer 8

CSS est orienté objet. ID dit par exemple, la classe dit classe.

Answer 9

espace sélecteur CSS permet en fait de style conditionnel id:

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

sera rendu 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 mission d'identification de haut niveau:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Personnellement, je préfère plus sélecteurs className:

body#list-page .title-block > h1 {font-size:56px}

que je trouve en utilisant les identifiants imbriqués pour différencier le traitement pour être un peu pervers. Il suffit de savoir que les développeurs dans le Sass / SCSS monde mettre la main sur ce genre de choses, ID imbriqués deviennent la norme.

Enfin, en ce qui concerne la performance sélecteur et priorité, ID tend à l'emporter. Ceci est un tout autre sujet.

Answer 10

Lors de l'application CSS, l'appliquer à une classe et essayer d'éviter autant que possible à un id. L'ID ne doit être utilisé en JavaScript pour chercher l'élément ou pour tout événement de liaison.

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

Parfois, vous ne devez utiliser des classes pour la liaison événement. Dans ce cas, essayez d'éviter les classes qui sont utilisées pour l'application de CSS et plutôt ajouter de nouvelles classes qui ne sont pas CSS correspondant. Cela viendra pour aider quand vous avez besoin de changer le CSS pour une classe ou changer le nom de la classe CSS tous ensemble pour tout élément.

Answer 11

Tout élément peut avoir une classe ou un identifiant.

Une classe est utilisée pour faire référence à un certain type d'affichage, par exemple, vous pouvez avoir une classe pour une div css 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 que vous utiliseriez une classe.

Un id se réfère uniquement à un seul élément, par exemple la section correspondante à droite peut avoir le coiffage spécifique à ce pas réutilisé ailleurs, il utiliserait un id.

Techniquement, vous pouvez utiliser des classes pour tous, ou les séparer logiquement. Vous ne pouvez pas, cependant, réutiliser id pour plusieurs éléments.

Answer 12

La classe est pour appliquer votre style à un groupe d'éléments. styles d'identification s'appliquent à tout l'élément avec cet ID (il ne devrait y avoir un). Habituellement, vous utilisez des classes, mais s'il y a un unique, vous pouvez utiliser les ID (ou tout simplement coller le style directement dans l'élément).

Answer 13

Dans le développement avancé id s que nous pouvons utiliser essentiellement JavaScript.

Pour des raisons répétables, class es venu contraire très pratique à id s qui censé être unique.

est un exemple ci-dessous illustre 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 box et box1 sont deux (2) différents <div> éléments, mais nous pouvons appliquer les classes box et bg-color-red à tous les deux.

Le concept est l'héritage dans un POO langue.

Answer 14

1) div id n'est pas réutilisable et ne doit être appliqué à un élément de HTML tandis que div class peut être ajouté à plusieurs éléments.

2) id a une plus grande importance si les deux sont appliqués au même élément et ont des styles contradictoires, les styles de l'identifiant seront appliqués.

3) élément de style se réfèrent toujours une classe div en mettant a. (Point) devant leurs noms tandis que la classe div id est appelé en mettant un # (dièse) devant leur nom.

4) Exemple: -

  

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

     

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

     

<div class="red-background" id="blue-background">Hello</div>   Ici arrière-plan en couleur bleue