Team-Masters.com

Que du Gratuit pour Webmasters

Recherche personnalisée

144 visiteurs par heure!

CLIQUEZ ICI, C'EST COOL ET GRATUIT !

Gagnez du trafic et de l'argent

PHP Sources

ressources graphiques



Classement de sites - Inscrivez le vôtre!

Top Clicks liendur


>

Les sélecteurs contextuels

Les sélecteurs contextuels sont plusieurs sélecteurs simples séparés par des espaces. La règle de style s’applique alors sur le dernier sélecteur de la série. Toutefois, c’est seulement lorsque ce dernier se trouve en présence des autres sélecteurs dans l’ordre que le style est actif. Par exemple, définissons la règle suivante :
h1 b { color: red }

Comme la règle ci-dessus comporte deux sélecteurs simples, nous concluons qu’il s’agit d’un sélecteur contextuel. Ainsi, les titre d’en-tête h1 ne seront rouge que s’ils sont en caractères gras comme ceci :

<h1><b>Ce titre est rouge</b></h1>

Par exemple, si on a les styles suivants :

h3 {
font-family: arial;
font-size: 16pt;
color: red;
}

h3 b em {
font-family: verdana;
color: green;
}
<h3><b> Ici notre texte est en rouge gras, <em>mais là il est en italique vert et gras de police verdana,</em>puis à nouveau rouge gras</b></h3>

Vous l’avez compris, les sélecteurs contextuels sont plusieurs sélecteurs qui se suivent et qui définissent des règles CSS qui sont valables pour un contexte donné. Par ailleurs, plusieurs sélecteurs contextuels peuvent être regroupés comme ceci, tout comme des sélecteurs simples :

h1 b, h2 b, b em { color: yellow }

La règle ci-dessus équivaut à celles-ci :

h1 b { color: yellow }
h2 b { color: yellow }
b em { color: yellow }

C’est compris ? Vous voyez bien qu’il existe une multitude de possibilités, et c’est pourquoi les CSS ont apporté une autre dimension dans la conception des pages web. Allons encore plus loin en donnant plus de style à nos éléments grâce aux sélecteurs class et id.

22 décembre 2004

 

Dans la même rubrique

Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte

>> Voir tous les articles