Les sélecteurs CSS

Ce résumé suffit pour une première approche. Si vous désirez une information plus approfondie, lisez toute la page.

Rappelons que dans une règle CSS, le sélecteur indique à quoi se rapportent un ensemble de propriétés. Dans l'exemple ci-dessous le sélecteur est la balise TD.

TD {Width: 2cm}

Autres sélecteurs possibles :

H1Sélecteur simple.
H1,H2,H3Groupe de sélecteurs.
TABLE PEléments imbriqués.
TD>PSélecteur père-fils direct.
P+PEléments consécutifs.
P.ImportantSous-classe.
.ImportantSous-classe indépendante.
P#Ligne12Sélection par balise et Id.
#Ligne12Sélection par Id seul.
:First-LetterPseudo-élément
P[Align=Center]Eléments avec critère.
TD[Rowspan]Elément avec présence d'un attribut.
*Sélecteur universel.

Sélecteur simple.

Le sélecteur est une balise HTML (sans les caractères < et >). Il désigne les élements correspondant à cette balise. Le code ci-dessous change la couleur des titres H1 (titres de plus haut niveau).

H1 {Color: Blue;}

Groupes.

Un groupe est composé de plusieurs balises séparées par des virgules. Il désigne tous les éléments correspondant à l'une des balises énumérées. L'exemple ci-après désigne les titres de H1 à H3.

H1, H2, H3 {Text-Align: Center;}

Eléments imbriqués.

Une série de balises séparées par des espaces désigne des éléments imbriqués dans un autre. On peut aussi dire les éléments enfants d'un autre. L'exemple parle davantage : les paragraphes ( P ) inclus dans un tableau ( TABLE ) seront centrés mais pas les paragraphes hors d'un tableau.

TABLE P {Color: Blue; Text-Align: Center}

Les paragraphes placés dans un tableau seront centrés et en bleu, contrairement à celui que vous êtes en train de lire qui est situé hors d'un tableau.

Ceci est un paragraphe dans un tableau

Autre paragraphe dans un tableau

Eléments père-fils.

Une série de balises séparées par le signe > désigne les éléments qui sont enfant directs d'un autre élément. L'exemple ci-après change la couleur des paragraphes ( P ) insérés directement dans une cellule ( TD ), sans autre balise intermédiaire.

TD>P {Color: Green;}

Eléments consécutifs.

Une série de balises séparées par un signe + désigne les éléments qui suivent directement un autre élément en ayant le même parent. Les deux éléments successifs peuvent être sur la même balise comme dans notre exemple ci-après.

TD+TD {Background-Color: Yellow;}

A partir de la deuxième cellule de chaque ligne, le fond est jaune.

   
   
   

Les sous-classes.

Il est souvent nécessaire de distinguer certaines parties du document bien que leur balise soit utilisée partout ailleurs. Ce sera le cas par exemple d'un paragraphe de remarque qui devra être en caractères italiques alors que le reste du texte est en caractères normaux.

On spécifie une sous-classe après le nom d'une balise en les séparant par un point. Il faut également renseigner l'attribut Class dans le code HTML.

P.Important {Font-Weight: Bold;}
P.Remarque {Font-Style: Italic;}

<p>Bla bla bla...bla bla.<p>
<p Class="Important">Blabla important...bla bla.<p>
<p Class="Remarque">Remarque sur le blablabla...bla bla.<p>

Bla bla bla...bla bla.
Blabla important...bla bla.
Remarque sur le blablabla...bla bla.

 

Attention ! Le nom d'une classe ne doit pas commencer par un chiffre. Cela choque la sensibilité de certains navigateurs.

D'autre part, vous ne pouvez pas utiliser plusieurs attributs Class dans une même balise. L'écriture suivante est incorrecte même si elle serait bien pratique pour appliquer à la fois du gras et de l'italique :

<p Class="Important" Class="Remarque">Remarque importante.<p>

Il existe cependant une solution qui semble fonctionner et qui consiste à utiliser un seul attribut Class mais avec les deux valeurs :

<p Class="Remarque Important">Remarque importante.<p>

Sous classes indépendantes.

Il est possible de préciser le nom d'une classe sans indiquer de balise. Dans ce cas, tous les élements ayant un attribut Class de cette valeur seront concernés, quelque soit leur balise.

.Alerte {Color: Red;}

La règle ci-dessus s'applique à tous les éléments suivants:

<p Class="Alerte">Cet animal est dangereux.<p>
<td Class="Alerte">Problème</td>
<h1 Class="Alerte">Liste des erreurs.</h1>

Sélecteur par ID.

L'attribut ID peut être utilisé comme sélecteur. En principe, l'ID est unique sur chaque page, ce qui signifie que les règles ayant un ID comme sélecteur ne s'appliqueront que sur un seul élément de chaque page.

P#Parag12 {Font-Size:12pt;}

Dans le code HTML, nous aurons :

<p Id="Parag12">texte du paragraphe.<p>

Il est tout à fait possible de spécifier l'Id sans préciser la balise:

#Parag12 {Font-Size:12pt;}

Les pseudo-éléments.

Les pseudo-éléments ont le caractère deux-points en début de leur nom. Ils désignent des éléments qui ne correspondent pas directement à une balise comme par exemple :First-Letter qui désigne la première lettre d'un paragraphe. Pour plus d'informations, reportez-vous au chapitre entier consacré aux pseudo-éléments.

Eléments avec critère.

Une balise suivie du critère entre crochets droits. Le critère porte sur un des attributs de la balise. Par exemple, la règle ci-dessous ne s'applique que sur les paragraphes centrés :

P[Align=Center] {Border:Thin Solid Gray;}

Si la valeur de l'attribut peut être une succession de valeurs séparées par des espaces, on utilisera la syntaxe ci-après qui est vraie si l'une des valeurs est égale à celle indiquée.

P[Attr~=Valeur]

On peut spécifier que la valeur de l'attribut doit commencer par une certaine valeur. Par exemple, la règle ci-dessous s'applique aux langues EN-US, EN et à toutes celles qui commencent par EN.

P[Lang|=EN]

Eléments avec présence d'un attribut.

Il s'agit en quelque sorte d'un critère simplifié. La règle s'applique dès que l'attribut indiqué est présent, quelque soit sa valeur. L'exemple ci-après concerne les cellules de tableaux qui couvrent plusieurs lignes:

TD[Rowspan] {Vertical-Align: Middle;}

L'étoile.

Le sélecteur étoile ( * ) désigne tous les éléments. Ce sélecteur est généralement utilisé pour intialiser une propriété commune à tous les éléments de la page comme la police par exemple.

* {Font-Family: Arial, Sans-Serif;}

Attention ! L'étoile détruit le mécanisme d'héritage par défaut comme le montre l'exemple ci-après.

* {Font-Size: 10pt;}

Tous les caractères ont donc une taille de 10pt.

Sur ce paragraphe nous avons exceptionnellement appliqué une taille de 12pt et mis ce mot en gras.

La balise <b> (gras) a normalement la valeur Inherit pour Font-Size mais cette valeur a été forcée à 10pt par le sélecteur * : l'héritage de la taille des caractères ne se fait plus.

Pour toute utilisation des informations de cette page, reportez vous au copyright