CSS: div id VS. classe div

Question

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

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

Answer 1

ids doit être unique, où, comme class peut être appliqué à beaucoup de choses. Dans le CSS, ids ressembler #elementID et class éléments ressembler .someClass

En général, 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 tous. Par exemple, la commune id des éléments sont des choses comme header, footer, sidebar. Commune class des éléments sont des choses comme highlight ou external-link.

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

La plupart de base de la priorité que vous devez comprendre, cependant, est que l' id sélecteurs priment class sélecteurs. Si vous avez eu ce:

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

et:

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

Le texte serait rouge en raison de la id sélecteur prend la priorité sur l' class - sélecteur.

Answer 2

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

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

Étudiant ID cartes sont distincts. Pas de deux étudiants sur le campus ont le même élève de l'ID de la carte. Cependant, de nombreux étudiants peuvent et vont se partager au moins une Classe avec les uns des autres.

C'est bien de mettre plusieurs étudiants de moins de un Classe titre, comme la Biologie. Mais il n'est jamais acceptable de mettre plusieurs étudiants de moins de un étudiant ID.

Au moment de donner des Règles sur l'école, système intercom, vous pouvez donner des Règles pour une 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 Élève en particulier, en appelant son unique ID:

"Jonathan Sampson est de porter un t-shirt vert demain".

#JonathanSampson {
  color: green;
}

Dans ce cas, Jonathan Sampson reçoit deux commandes: une étudiante dans la classe de Biologie, et l'autre comme un indispensable. Parce que Jonathan a dit directement, via l'attribut id, porter une chemise verte, il ne tiendra pas compte de la demande de porter une chemise rouge.

Le plus précis des sélecteurs de gagner.

Answer 3

Où utiliser un ID par rapport à une classe

La simple différence entre les deux est que, même si une classe peut être utilisée à plusieurs reprises sur une page, un ID doit être utilisé une seule fois par page. Par conséquent, il est approprié d'utiliser un ID sur l'élément div qui est marquant le contenu principal de la page, comme il n'y aura qu'une section de contenu principal. En revanche, vous devez utiliser une classe pour définir une alternance de lignes de couleurs sur une table, comme ils le sont, par définition, va être utilisé plus d'une fois.

Id est un outil incroyablement puissant. Un élément avec un ID peut être la cible d'un morceau de code JavaScript qui manipule l'élément ou de son contenu, d'une certaine façon. L'attribut ID peut être utilisé comme cible d'un lien interne, en remplacement d'ancrage des étiquettes avec le nom des attributs. Enfin, si vous faites vos Identifiants clair et logique, 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 d'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.

Answer 4

Un identifiant doit être unique dans 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 identifiant

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

et encore avoir une classe

Answer 5

Une CLASSE doit être utilisé pour de multiples éléments que vous voulez le même style pour. Un ID doit être unique élément. Voir ce tutoriel.

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