Médiaforma

Un sélecteur descendant

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à limiter les modifications de styles CSS à une balise spécifique dont l’attribut class ou id a une valeur particulière. Dans cette section, je vais vous montrer comment utiliser un sélecteur descendant pour modifier les caractéristiques d’une balise enfant d’une autre balise.

Dans cet exemple, nous allons modifier le style des balises <li> enfants d’une balise <div>. Le corps du document contient deux listes <ul> identiques. La première est spécifiée à l’extérieur d’une balise <div> et la deuxième à l’intérieur d’une balise <div>.

Pour modifier le style des balises <li> contenues dans une balise <div>, nous allons utiliser un sélecteur descendant en précisant la balise parent (div) et la balise enfant (li). Dans cet exemple, les balises <li> contenues dans une balise <div> seront de couleur rouge :

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, seules les balises <li> contenues dans une balise <div> sont affectées par le changement de style.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Votre icone de Javascript fait référence à Java, deux langages complètement différent…

Leave a Reply