Différence entre id et class en CSS et quand l'utiliser

Question

 <style>
    #main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>

<div id="main">
    Welcome
</div>
 

Ici, j'ai donné id to div élément et son application quel que soit le css correspondant.

OU

 <style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>
<div class="main">
    Welcome
</div>
 

Maintenant, ici, j'ai donné la classe à l'élément div et c'est aussi faire le même travail pour moi.

Alors quelle est la différence exacte entre id et class et quand je devrais utiliser id et quand je devrais utiliser class. Je suis novice en CSS et conception de sites Web et il y a peu de confusion lorsque je traite avec cela.

Merci

Answer 1

• L'utilisation d'une classe lorsque vous souhaitez constamment le style de plusieurs éléments dans la page/site. Les Classes sont utiles lorsque vous avez, ou, éventuellement, sera à l'avenir, plus qu'un élément qui partage le même style. Un exemple peut être un div de "commentaires" ou un certain style de liste à utiliser pour les liens connexes.

  En outre, un élément donné peut avoir plus d'une classe qui lui est associé, alors qu'un élément ne peut avoir qu'un id. Par exemple, vous pouvez donner un div en deux classes dont les styles permettra à la fois de prendre effet.

  En outre, notez que les classes sont souvent utilisés pour définir des styles de comportement en plus de visuels. Par exemple, le jQuery, validateur de formulaire plugin lourdement utilise des classes pour définir la validation du comportement d'éléments (par exemple, nécessaire ou non, ou de définir le type de format d'entrée)

  Exemples de noms de classe sont: tag, le commentaire, la barre de bouton, d'avertissement message ou e-mail.

• Utiliser l' ID lorsque vous avez un seul élément sur la page, qui va prendre le style. Rappelez-vous que l'Id doit être unique. Dans votre cas, cela peut être la bonne option, car il y a sans doute qu'une "principale" de la div sur la page.

  Exemples d'identifiants sont: main-contenu, en-tête, pied de page, ou à gauche de la barre latérale.

Un bon moyen de se souvenir que c'est une classe est un type de point et de l' id est le nom unique d'un élément sur la page.

Answer 2

Les ID sont uniques

• Chaque élément peut avoir qu'un seul ID
• Chaque page peut avoir qu'un seul élément avec l'ID

Les Classes ne sont PAS uniques

• Vous pouvez utiliser la même classe sur plusieurs éléments.
• Vous pouvez utiliser plusieurs classes sur le même élément.

Javascript soucis

JavaScript personnes sont déjà probablement plus en phase avec les différences entre les classes et les ID. JavaScript dépend de l'existence d'un seul élément de la page avec n'importe quel particulier, ou encore couramment utilisés en fonction getElementById ne serait pas fiable.

Answer 3

plus d'infos lien

Exemple

<div id="header_section" class="header_section">Text</div>

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

Le texte serait blanc. Notez que CSS utilise le préfixe # pour Id et . pour les Classes.

"font-color" est une balise html et obsolète en HTML 4.01. En CSS il n'y a pas de "police-couleur", le style est "couleur" donc, nous devrions lire:

Exemple

<div id="header_section" class="header_section">Text</div>

#header_section {color:#fff}
.header_section {color:#000}

Le texte serait blanc.

Answer 4

Id doit être unique, vous ne pouvez pas avoir plus d'un élément avec le même ID dans un document html. Les Classes peuvent être utilisées pour de multiples éléments. Dans ce cas, vous souhaitez utiliser un ID pour "principale" parce que c'est (sans doute) d'unique, c'est le "principal" div qui sert de conteneur pour votre contenu et il n'y aura qu'un seul.

Si vous avez un tas de boutons de menu ou un autre élément pour lequel vous voulez le style répétée, vous pouvez assigner tous à la même classe, et puis le style de cette classe.

Answer 5

Comme à peu près tout le monde a dit utiliser ID pour des éléments uniques et classe pour plusieurs éléments d'utilisation.

Voici un exemple rapide et simplifié: prenez les balises HTML et HEAD comme lues

 <body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div class="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>
 

En outre, comme mentionné dans d'autres réponses, les ID sont bien exposés au javascript, les classes le sont moins. Cependant, les frameworks javascript modernes comme jQuery exploitent également la classe pour javascript