docLes sélecteurs et l`arborescence - ciblage des sélecteurs
download 
Plainte Transcription
Les sélecteurs et l`arborescence - ciblage des sélecteurs
Les sélecteurs et l'arborescence - ciblage des sélecteurs
Corrigé
Les sélecteurs et l'arborescence - ciblage des sélecteurs [réponses]
Question 1
Prenons le code HTML suivant comme exemple :
1.
2.
3.
4.
5.
6.
7.
<h1 class="ma_classe">Présentation</h1>
<div id="mon_id_1" class="ma_classe">Salut</div>
<span id="mon_id_2" class="ma_classe">Ca va ?</span>
<div>
<span>Oui !</span>
<p>Et toi ?</p>
</div>
Quelle(s) ligne(s) de l'exemple sera/seront affectée(s) par les sélecteurs suivants?
Ligne(s)
div > span { text-decoration:underline; }
5
Le signe « > » indique un sélecteur d’enfant, il désigne les enfants de premier niveau
uniquement (il ne cible que les descendants immédiats de l’élément).
.ma_classe { text-decoration:underline; }
1,2,3
Cible tous les éléments porteurs de la classe « .ma_classe » seront affectés
div + span { text-decoration:underline; }
3
Le signe « + » indique un sélecteur de frère adjacent, il sélectionne le frêre qui suit
directement un élément (et permet ainsi de cibler un élément précédé par un autre
élément qui possède le même parent).
h1 { text-decoration:underline; }
1
Ciblage classique de la balise h1
span#mon_id_2 { text-decoration:underline; }
3
Cible uniquement les span possédant l’ID #mon_id_2
h1,div { text-decoration:underline; }
1,2,5,6
Cible tous les h1 et tous les div
div span { text-decoration:underline; }
5
Cible uniquement les span contenus dans un p
span.ma_classe { text-decoration:underline; }
Nathalie Vanassche
www.nathalievanassche.be
3
1
Les sélecteurs et l'arborescence - ciblage des sélecteurs
Corrigé
Cible uniquement les span possédant la classe .ma_classe
p > span { text-decoration:underline; }
/
Car span ne descend pas immédiatement de p
div p { text-decoration:underline; }
6
Ciblage classique de p dans div
Question 2
De quelle manière optimale puis-je cibler à la fois tous les titres de niveau 1 de ma page, tous les éléments de
classe fruit, ainsi que l’élément dont l’identifiant est header ?
La meilleure façon est d’employer le sélecteur de groupe :
h1, .fruit, #header {
ici les styles CSS ;
}
Question 3
Comment puis-je cibler uniquement le premier niveau d’éléments <div> contenus au sein de ma section
(<section>) ?
Pour cibler uniquement le premier niveau de <div> du document :
section > div {
ici les styles CSS ;
}
Question 4
Comment cibler tous les paragraphes SAUF le 1er sans modifier le code HTML ? (Le nombre de paragraphes est
aléatoire).
<body>
<p>premier paragraphe</p>
<p>deuxième paragraphe</p>
<p>troisième paragraphe</p>
…
</body>
Sélectionnez le premier élément à l’aide du sélecteur d’adjacence :
body p:not(:first-child) {
ici les styles CSS ;
}
Question 5
Comment cibler dans la liste ci-dessous 1 élément sur 3 sans modifier le code HTML ?
<ul>
<li>premier élément</li>
<li>deuxième élément</li>
<li>troisième élément</li>
<li>quatrième élément</li>
<li>cinquième élément</li>
…
</ul>
Nathalie Vanassche
www.nathalievanassche.be
2
Les sélecteurs et l'arborescence - ciblage des sélecteurs
Corrigé
3
li:nth-child(3n) {
ici les styles CSS;
}
Car :
3*0=0, 3*1=3, 3*2=6, 3*3=9, …
…
Question 6
De quelle couleur sera le titre de mon document issu du code HTML ci-dessous et des règles de styles CSS suivantes ?
Pourquoi ?
HTML
<div class="container"><h1 id="first" class="fruit">Potage de kiwi</h1></div>
CSS
h1 {color: green;}
#first {color: blue;}
h1.fruit {color: yellow;}
h1.fruit:first-child {color: red;}
div.container > h1.fruit:first-child {color: gray;}
La règle de priorité des sélecteurs s’applique aux différentes règles : le poids de l’identifiant (#first) l’emporte sur
tous les autres types de sélecteurs proposés (classe, attribut, pseudo-classe, élément et pseudo-élément), de plus,
les sélecteurs d'enfant, de frère ou de parent ne comptent pour rien. Au final, le titre du document sera donc de
couleur bleue.
Lecture Web : http://jeremie.patonnier.net/post/2009/08/18/La-preseance-des-selecteurs-CSS
Nathalie Vanassche
www.nathalievanassche.be
