12. Les sélecteurs de style

Publié le 23 août 2006 par Majunia

Pour présenter tous les liens hypertextes (<a>) en police grasse de couleur verte, nous écrirons :

a {
font-weight: bold;
color: green;
}

L’exemple ci-dessus utilise comme sélecteur la balise <a>. Ces règles affecteront toutes ces balises dans les pages HTML concernées. Cet effet n’est pas toujours désirable.

Pour cela, le langage CSS accepte différentes formes de sélecteurs :

• les sélecteurs de balises (utilisées ci-dessus)

• Les sélecteurs de classe

- Une classe est un nom donné librement (en se limitant aux caractères alphanumériques classiques) à un ensemble d’éléments HTML à distinguer.
- Un sélecteur de classe reprend son nom en le préfixant d’un point.

exemple :
partie HTML :
<a href=«…» class=«sommaire»>lien rouge</a>

partie CSS :
.sommaire {
color: red;
}

Dans cet exemple, tous les liens de la classe sommaire sont en rouge.
- On préfèrera des noms de classes en rapport avec la structure des éléments qu’ils désignent et non avec la présentation.
- Rien ne vous contraint à réserver cette classe à l’élément <a>.
- Un seul élément peut recevoir plusieurs classes.

Supposons que vous mettiez en place la classe titre2 suivante :
.titre2 {
text-align: center;
}

On pourra appliquer sur un même élément les différentes classes créées comme suit :
<h2 class=«sommaire titre2»titre de niveau 2 en rouge et centré</h2>

• les sélecteurs d’identifiants

- Un identifiant ou id est le nom attribué à un élément unique dans le document HTML.
- Le nom est choisi librement (en se limitant aux caractères alphanumériques classiques).
- Il se distingue de la classe en ce qu’il ne peut porter qu’au plus sur un objet du document.
- Les sélecteurs CSS s’y réfèrent par l’emploi d’un caractère dièse (#) suivi de son nom.

exemple :
partie HTML :
<div id=«encart»>contenu de l’élément</div>

partie CSS :
#encart {
background-color: yellow;
}

Prenez le réflexe d’attribuer un identificateur aux objets uniques de votre code (bloc d’en-tête, bloc publicité, bloc rubriques annexes, etc.)

Les paragraphes ou listes de menus, susceptibles d’apparaître plusieurs fois dans un document HTML, seront quant à eux qualifiés à l’aide de classes.

• les pseudos-classes et les pseudos-éléments (variantes pour certaines fonctionnalités, par exemple les liens)

- Créent des éléments spécifiques à certaines actions (comme le survol d’un lien) ou à certaines arborescences.

exemple :
a: hover {
text-decoration: none;
}

Cela affectera tous les liens de la page lors de leur survol par le pointeur de la souris.

<a href=«…» texte du lien</a>

Avec cette instruction, les liens hypertextes –soulignés par défaut- apparaîtront sans ornement lorsque le pointeur de la souris les survolera.

On peut bien sûr utiliser de concert pseudos-classes et classes.

accéder à l'article suivant