Quelle est la différence entre ID et CLASS ?

[Guest CraJK]

Salut à tous,

Je suis en vacances mais même ici je trouve le temps d'être hanté par les feuilles de style.

Je voulais juste que k'on m'explique la différence entre les éléments

ID

et

CLASS

Voili voilou ma question stupide du jour

[pierredureau]

Tout d'abord, ce ne sont pas des éléments mais des attributs.

Ensuite,

- id permet d''atttibuer un identifiant à un élément. C'est pratique si on veut faire du DOM dessus ou pour des fonctions spéciales comme les ancres dans les pages ou les target (en transitional).

Une certain identifiant ne peut être attribué qu'à un seul élément.

Par exemple, il ne pourra pas avoir plusieurs id="menu" dans la page.

En CSS, on peut stylé les éléments identifiés et il y a un raccourci bien pratique : à la place de [id=menu] (pas reconnu par tous les navigateurs), on peut mettre #menu

- class n'a pas tout ce fondement sémantique, c'est utile que pour les CSS.

On attribue une classe à un élément pour qu'il possède le même style que les autres éléments de sa classe. On voit donc un différence fondamentale avec id, il peut y avoir plusieurs élements partageant la même classe.

Le raccourcit de [class=vignette] est .vignette

[LaurentDenis]

Tout est dit, ou presque : class est tout aussi "sémantique" que id : "si on veut faire du DOM dessus", par exemple... C'est un identificateur irremplaçable, sachant qu'il peut être répété dans le document pour étiquetter une série de données

[20cent]

Rien à rajouter non plus.

Si ce n'est un lien : http://www.alsacreations.com/articles/id_class/

Et d'ailleurs, les questions les plus fréquemment posées trouvent bien souvent leurs réponses sur le site de Raphaël (alias SIBELIUS).

[pierredureau]

"si on veut faire du DOM dessus"

Quand je me relis... je me marre bien.

[Bobe]

C'est un identificateur irremplaçable, sachant qu'il peut être répété dans le document pour étiquetter une série de données

Peux tu fournir un exemple mettant en valeur cet "avantage" ?

[Guest meta nando]

( le temps que rédige ma réponse, 3 personnes ont déjà donné la leur... Mais bon, je vai quand même donner la mienne...

voici la tortue! )

Quand tu désires affecter un même style à plusieurs éléments (ou balises) tu utiliseras (entre autres) les sélecteurs d'attribut class.

Par contre quand tu vises un seul élément tu utiliseras le sélecteur d'identificateur. L'attribut id doit être unique dans la page.

Exemple:

<div class="complement">
  <ul>
      <li>Glossaire</li>
      <li id="annuaire">Annuaire</li>
      <li>Lexique</li>
  </ul>
</div>
<p class="complement">Le mot de la fin...</p>

Pour appliquer le style complement aux éléments p et div qui le demandent il faut par exemple écrire:

.complement {... le style pour tous les complement ...}

Les sélecteurs de classe servent donc à modifier plusieurs éléments de façon identique. Ces sélecteurs sont peu spécifiques, sont généraux, ne ciblent pas...

L'élément li qui a pour id annuaire, et à lui seul, tu pourras lui appliquer un autre style:

#annuaire {... un style seulement pour le 2ème li ...}

Un sélecteur d'ID sert donc à modifier un élément unique. Ce sélecteur est très spécifique, il n'y a pas d'ambiguïté sur la balise cible.

Ce n'est pas tout...

En fait la distinction entre les sélecteur de classe et d'identificateur est une conséquence des règles de spécification des sélecteurs.

Moi qui débute, je passe par cette étape.

J'ai compris que si on ne faisait pas le distinguo class/id c'est qu'on avait pas compris une partie essentielle des CSS, à savoir les règles de cascade.

Voici (en gros) un ordre de priorité d'application des CSS,

du plus global (ou moins spécifique) au plus ciblé (le plus spécifique):

• Le sélecteur universel:
  * {background-color: red;} -> tous les fonds seront rouges;
  
• Le sélecteur universel + sélecteur de classe:
  *.bleusombre {background-color: #008;} -> seulement les balises de classe bleusombre auront un fond bleu foncé;
  .bleusombre {background-color: #008;} -> idem (on peut omettre l'étoile).
  
• Le sélecteur de type:
  h2 {background-color: red;} -> tous les titres H2 auront un fond rouge;
  
• Le sélecteur de type + sélecteur de classe:
  h2.bleusombre {background-color: #008;} -> seulement les H2 qui sont de classe bleusombre auront un fond bleu foncé;
  
• Les sélecteurs descendants et les sélecteurs d'enfants (ça se complique):
  ul li {background-color: red;} -> tous les li fils de tous les ul auront un fond rouge;
  
• Les sélecteurs descendants et les sélecteurs d'enfants + le sélecteur d'ID (ça se complique):
  #plus li {background-color: #008;} -> tous les li fils du bloc d'ID plus auront un fond sombre.
  
• #plus .bleusombre {background-color: #008;} -> seulement les balises de classe bleusombre filles du seul bloc d'ID plus auront un fond bleu foncé;
  
• ...
  

Beaucoup de combinaisons sont possibles.

Si t'as compris ce que j'ai voulu dire c'est cool.

[LaurentDenis]

Peux tu fournir un exemple mettant en valeur cet "avantage" ?

Quelques exemples de l'utilité des classes dans le XHTML pour "faire du DOM dessus" (pierredureau, ça va te rester, ça... )

Un excellent exemple dans un tutoriel complet de Karl Dubost, montrant pas à pas comment générer un RSS à partir d'une source XHTML via XSLT :

- le tutoriel commence avec Jour 1 : De XHTML à RSS - Structure de ce site

- l'utilisation des classes pour viser les informations à extraire de la source XHTML apparaît dans Jour 6 - De XHTML à RSS - Explication du jardin

Autre exemple : imaginons un CMS pour un site publiant les contributions de différents auteurs. Le CMS archive les sources de ses articles en docbook, autrement dit, dans un dialecte XML pas forcément connu des auteurs et délicat à manier. Plutôt que d'imposer aux auteurs l'utilisation de docbook pour fournir leurs articles, on leur demande simplement de faire un XHTML valide respectant les règles d'un template simple.

Celui-ci leur fait utiliser entre-autres des classes pré-définies qui seront utilisées par la transformation XSLT vers le docbook final, après un simple upload de l'article... (toute ressemblance avec le CMS d'OpenWeb serait purement fortuite D'ailleurs, ça ne marche plus tout à fait comme ça)

Dernier exemple : dans mon weblog, je suis en train de préparer un système de récupération de mes liens, pour constituer une BD de sources. Je voudrais que les liens présent dans un billet soient récupérés automatiquement lors de la publication, pour être indexés selon leur sujet.

Je vais simplement utiliser des classes appliquées à ces liens pour les étiquetter selon leur thématique, à l'aide de quelques mots-clés combinables (XHTML, CSS, accessibilité, egronomie...), faciles à utiliser lorsque j'écris mon billet.

Après ajout d'un billet au blogue, une simple XSLT pourra extraire les liens et les indexer en se basant sur ces classes. (Tu me diras peut-être que je pourrais obtenir le même résultat en utilisant le title des liens... sauf que ça casserait l'accessibilité, avec des titles n'apportant plus la bonne information).