TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les sélecteurs d'éléments

Sélecteur d'éléments

Un sélecteur d'élément permet d'appliquer un ensemble de propriétés à tous les éléments portant le nom du sélecteur dans un document.

X { prop1:valeur1; prop2:valeur2;...; propN:valeurN;}
permet d'appliquer l'ensemble des propriétés définies entre accolades à tous les éléments X du document.

Ainsi : h1 {color:#FF0000; font-size:18px;}  aura pour effet d'afficher tous les titres h1 en rouge avec une taille de 18 pixels.

Sélecteur universel

Le sélecteur universel représente tout élément. Il se note "*"

Par exemple : * {color : red ; }   affichera tous les éléments en rouge.

Sélecteur d'éléments imbriqués

Exemple

Supposons les déclarations suivante :

body
{
color : black
}

strong
{
color : red
}

h1
{
color : red
}

Le texte mis en valeur dans l'élément <strong>, apparaitra en rouge dans la page dont le texte est noir. Etant donné que les titres <h1> sont également affichés en rouges, le contenu d'un élément <strong> au sein d'un titre <h1> ne sera pas la mis en évidence par un contraste de couleur comme pour le reste de la page.

On peut remédier à cette situation en imposant aux éléments <strong> figurant dans une balise <h1> d'apparaitre dans une autre couleur. Il suffit d'ajouter la déclaration suivante :

h1 strong 
{
color : blue
}

Désormais les éléments strong descendants d'un élément h1 s'afficheront en bleu. Les éléments strong figurant en dehors d'une balise <h1> seront toujours affichés en rouge.

Cas général

La syntaxe d'un sélecteur d'élément imbriqué est la suivante :

X2 X1 désigne les éléments X1 descendants d'un élément X2

plus généralement :

XN ... X2 X1 sélectionne les éléments X1 descendants d'un élément X2 descendant ..... descendant d'un élément XN

Le sélecteur universel permet d'imposer une profondeur minimale d'imbrication :

X2 * X1 : sélectionne toutes les éléments X1 descendant d'un descendant de X2 ce qui exclu les X1 enfants de X2

Sélecteurs d'éléments enfants

Exemple

Supposons que l'on souhaite appliquer une certaine mise en forme aux liens figurant dans une liste <ul> directement incluse dans <body>

Le sélecteur ul a  s'applique à tous les liens <a> figurant dans une listes <ul> quelle que soient leur imbrication.

body ul a  est équivalent à ul a  puisque tout élément ul est nécessairement un descendant de body.

Pour désigner les seuls éléments ul enfant de l'élément body on utilise le sélecteur : body>ul

En conséquence pour appliquer une certaine mise en forme aux liens <a> figurant dans une liste <ul> directement incluse dans <body> on utilise le sélecteur : body>ul a

Cas général

La syntaxe d'un sélecteur d'éléments enfants :

X2>X1 qui désigne les éléments X1 enfants d'un élément X2

On peut méler l'opérateur d'imbrication d'éléments et l'opérateur enfant (>)

X3 X2>X1 désigne les enfants d'un élément X2 descendant d'un X3

X3>X2 X1 désigne les descendants d'un élément X2 enfant de X3

XN> ... >X2>X1 sélectionne les enfants X1 d'un élément X2 enfant..... enfant d'un élément XN

En utilisant le sélecteur universel :

X2>*>X1 : sélectionne tous les éléments X1 enfants d'enfants d'un élément X2 (les petits-enfants)

X2>*>* : sélectionne tous les éléments enfants d'enfants d'un élément X2

Sélecteurs d'éléments consécutifs

Exemple

Si conventionnellement on décide que la légende d'un tableau est positionnée dans le paragraphe qui suit la l'élément <table>, on peut souhaiter une mise en forme spécifique pour de tels paragraphes. A cet effet on pourra utiliser le sélecteur d'éléments consécutifs :table + p  qui désigne tout paragraphe précédé de l'élément table.

Cas général

Pour désigner un élément X suivant directement un élément Y dans le code on utilise le sélecteur : Y + X

L'opérateur d'éléments consécutifs (+) peut être combiné avec les autres opérateurs.

Z Y+X  désigne les éléments X suivant un élément Y descendant d'un élément Z

Z+T>Y+X désigne les éléments X suivant un élement Y enfant d'un élément T suivant un élément Z

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007