CSS : Appliquer plusieurs classes à un élément

mercredi 23 mai 2007

XHTML / CSS

Vous saviez déjà (mais si) qu’il est possible d’appliquer plusieurs classes à un élément comme ceci :

<a href="#URL_RUBRIQUE" class="hac on selected">

Mais comment appliquer un style aux éléments qui ont deux classes (ou plus) ? Tout simplement comme ceci :

a.hac{...}
a.on{...}
a.hac.on{...}
  • La première règle cible les ancres qui répondent à la classe hac.
  • La deuxième règle cible les ancres qui répondent à la classe on.
  • Et la dernière règle cible les éléments qui répondent à la classe hac et à la classe on.

Le problème est qu’IE6 ne sait pas interpréter les classes multiples. Dans notre exemple, il appliquera seulement la classe "on" car c’est la dernière déclarée.

A lire : un article de css-discuss à ce sujet.

Vos commentaires

  • Shin

    Merci, j’avais totalement oublié comment faire et ce post m’a bien aidé !

    7 novembre 2010, 17:33

  • SalutLesCopains

    Danke mann, mais tu pourrais t’étendre un peux plus sur le sujet !!!

    22 septembre 2013, 17:59

  • ait friha

    Bonjour,
    Merci pour vous d’avoir aborder ce sujet, s’il vous plais je veux modifier le css de mon site créer par drupal mais j’arrive pas à interpréter ce code css. je vois bien identifiant c’est claire, mais pourquoi les trois class là ? et pourquoi identifiant et class en meme temps.Merci d’avance

    div id="block-search-form" class="block block-search contextual-links-region"

    29 décembre 2013, 01:35

  • b_b

    Salut @ait friha, le code que tu affiches est du HTML, si tu veux le modifier il faut regarder du côté de tes templates drupal.

    29 décembre 2013, 11:14

  • CSS

    Merci, je ne me souvenais plus non plus :)

    24 janvier 2014, 08:59

Répondre à cet article

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.