Retour à la table des matières

Les différents types de sélecteurs CSS

Comme nous l'avons déjà dit à plusieurs reprises, il est possible de spécifier du style en différents endroits. Le cas le plus simpliste étant celui ou vous injectez votre définition de style directement dans le tag souhaité. Dans ce cas, la liaison entre la défintion HTML et le bloc de styles CSS est implicite.

Par contre dans le deux autres cas (définition du style pour la page ou pour un ensemble de pages), on utilise la notion de sélecteurs de style pour lier le style aux différents éléments du document à présenter.

Cette notion de sélecteur peut être plus ou moins complexe. La forme de sélecteur la plus simple, nous l'avons déjà tester, consiste à définir du style pour tous les tags de même nom. Mais ce n'est pas la seule et unique alternative. Le but de ce chapitre est donc de voir, une par une, ces différentes possibilités.

Définition de styles pour tous les tags de même nom

Ou que soit localisée votre définition (page HTML ou fichier CSS), il vous faut donc spécifier à qui elle s'applique. C'est à cela que sert le sélecteur. La forme de sélecteurs la plus simple consiste à appliquer un style à tous les tags de même nom.

Le sélecteur apparaît, syntaxiquement parlant, juste avant le bloc de définition de style. Dans le cas présent, le nom du sélecteur correspond au nom du tag HTML souhaité. L'exemple suivant vous montre comment appliquer un style à tous les titres de premier niveau d'un document.

H1 {
    text-align: center;
    font-family: verdana;
    font-weight: bold;
    color: #A0E0FF;
}

Définition d'un style pour plusieurs catégories de tags

Le but d'une charte graphique est d'être cohérente. Y compris sur des aspects telles que les polices de caractères. Dans certains cas, vous pourriez avoir besoin de spécifier la même police pour tous les titres et tous les paragraphes. Ne faites pas la chose explicitement pour chaque tag, sans quoi, vous augmentez le nombre de règles à impacter en cas de mise à jour de la charte graphique.

La bonne solution consiste à spécifier une règle pour un ensemble de types de tags. Pour vous assister dans de tels cas, la possibilité de cumuler plusieurs caractéristiques dans différentes règles et ceux pour un tag particulier, vous est donnée.

L'exemple suivant fixe une même police de caractères pour tous les titres du document ainsi que les paragraphes. D'autres caractéristiques sont adjointes spécifiquement à chaque type de tags.

P, H1, H2, h3 {
    font-family: verdana;
}

H1, H2, H3 {
    font-weight: bold;
}

H1 {
    text-align: center;
    color: #A0E0FF;
}

P {
    text-align: justify;
}

Définition de styles pour des tags imbriqués

Une autre possibilité, me semble t'il, intéressante, consiste à définir du style pour des tags imbriqués dans d'autres tags. Pour ce faire, le sélecteur sera assez proche de ceux vus dans l'exemple précédent : les tags seront séparés via, non pas une virgule, mais un espace.

A titre d'exemple, considérons le cas des listes à puces : l'utilisation de ce type de sélecteur est fondamentale. En effet, pour changer l'image des éléments de la liste, il faut spécifier du style pour le tag UL (Unordered List). Or, pour avoir des sous niveaux dans la liste, il faut à nouveau réutiliser le tag UL. Dans un tel scénario, comment avoir des puces différentes à chaque niveau via CSS ? Une solution vous est proposées dans l'extrait de code CSS qui suit.

/* Style pour tous les paragraphes contenus dans un tableau */
TD P { color: blue; }

/* Style pour les liens contenus dans un paragraphes */
P A { color: blue; }
/* Style pour les liens dans des cellules de tableaux */
TD A { color: green; }

/* Choix des images pour les listes à puces */
UL       { list-style-image: url('puce1.gif'); } /* Premier niveau   */
UL UL    { list-style-image: url('puce2.gif'); } /* second niveau    */
UL UL UL { list-style-image: url('puce3.gif'); } /* troisième niveau */

La notion de classe de style

Dans tous les cas que nous venons de voir, le style à été appliqué par rapport à un nom de tag. Ce n'est pas la seule façon de faire. En effet, il est possible d'appliquer un même style sur deux éléments d'un document, même s'ils ne sont pas de nature identique (un titre et un paragraphe, par exemple). Pour ce faire, on utilise la notion de classe de style.

Une classe de style s'introduit par un sélecteur qui commence par un point (et uniquement ce caractère). Si ce n'est pas le cas, le style sera appliquer aux tags de ce nom, même si ce dernier n'est pas un nom de tag HTML. Notez, toute fois que cela est fort intéressant pour les recommandations XML et XHTML du W3C.

Ce concept permet aussi de ne pas appliquer le style à tous les éléments de même nature. Par exemple, vous avez pu remarquer que cette page présente des blocs de code. En fait il s'agit de tableaux à une cellule. Or, pour la mise en page, d'autres tableaux sont aussi utilisés. Si j'applique une couleur de fond à tous tableaux, toute la page s'afficherait de cette couleur. La meilleur solution consiste donc à définir une classe de style et à l'appliquer à tous les éléments souhaités.

L'exemple de code suivant, vous montre comment définir une classe de style CSS et comment l'appliquer à certains tags. Notez bien que, dans cet exemple, le style est embarqué dans la page elle-même.

<html>
    <head>
        <title>Page de test</title>
        <style>
        <!--
            .Style1 { color: red; }
            .Style2 { color: green; }
            .Style3 { color: blue; }
        -->
        </style>
    </head>
    <body>
        <h1 Class="Style1">Titre de niveau 1</h1>

        <p class="Style1">Premier paragraphe</p>
        <p class="Style2">Second paragraphe</p>
        <p class="Style3">Troisième paragraphe</p>
    </body>
</html>

Définition de styles pour un tag particulier

La dernière alternative que je vous présente permet de spécifier un style pour un seul et unique élément. En effet, depuis CSS, vous avez la possibilité d'identifier un noeud (un élément) du document HTML. Pour ce faire, il vous suffit d'ajouter un paramètre id au tag considéré : la valeur de ce tag est un nom que vous choisissez. Mais attention chaque identificateur se doit d'être unique pour le document en cours.

Pour lier le style à cet élément, il faut utiliser un sélecteur dont le nom commence par le caractère # suivit de l'identificateur choisit. Seul l'élément en question se verra affecté le style considéré. L'exemple de code suivant vous permettra, j'en suis sûr, de mieux comprendre les choses. De plus, si vous définissez un style paragraphes et si vous fournissez de plus un style particulier pour un paragraphes identifié par son ID, en cas de conflit de valeurs pour certains attributs, ce sont toujours les définitions les plus spécifiques (donc celles définies spécifiquement pour le paragraphe avec l'identifiant) qui s'appliquent.

<html>
    <head>
        <title>Page de test</title>
        <style>
        <!--
            #TheId { color: red; }
        -->
        </style>
    </head>
    <body>
        <h1>Titre de niveau 1</h1>

        <p>Premier paragraphe</p>
        <p id="TheId">Second paragraphe</p>
        <p>Troisième paragraphe</p>
    </body>
</html>

Conclusion

Au terme de ce chapitre, vous êtes à même de comprendre les différents types de sélecteurs utilisés pour la mise en oeuvre de feuilles de styles CSS.

Les différents types de sélecteurs vous permettent de décorer - tous les tags de même nom - les tags inclus dans d'autres tags - les éléments associés à une classe de style - ou l'élément identifié par un id donné.

Dans le chapitre suivant, le dernier de ce cours, nous allons nous pencher sur les différents attributs de style, fournis dans CSS.

Retour à la table des matières