Combinaisons complexes de sélecteurs de descendants et de classes en CSS
Supposons maintenant que nous ayons le code suivant :
<div class="block">
<h2 class="header">Titre h2</h2>
<p>
texte
</p>
<h3 class="header">Titre h3</h3>
<p>
texte
</p>
<p>
texte
</p>
</div>
<div class="block">
<h2 class="header">Titre h2</h2>
<p>
texte
</p>
<h3 class="header">Titre h3</h3>
<p>
texte
</p>
<p>
texte
</p>
</div>
Trouvons tous les éléments avec la classe header,
situés à l'intérieur d'un élément avec la classe block,
et définissons pour eux la police Arial :
.block .header {
font-family: Arial;
}
Comme on peut le voir dans le code HTML, à l'intérieur d'un élément avec
la classe block, les éléments avec la classe header
peuvent être aussi bien des titres h2 que
des titres h3. Écrivons des sélecteurs
qui distinguent ces titres, et faisons quelque chose
avec ces titres.
Sélectionnons tous les h2 avec la classe header,
situés à l'intérieur d'un élément avec la classe block :
.block h2.header {
font-size: 30px;
color: red;
}
Et maintenant, sélectionnons tous les h3 avec la classe
header, situés à l'intérieur d'un élément
avec la classe block :
.block h3.header {
font-size: 20px;
color: green;
}
Rassemblons tout notre CSS :
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Appliquons-le à notre code HTML :
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee .bbb {
color: red;
}
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee h2 {
color: red;
}
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee h2.bbb {
color: red;
}
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee h3.bbb {
color: red;
}
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee p.bbb {
color: red;
}
Expliquez ce que le sélecteur sélectionne dans le code ci-dessous. Ensuite, écrivez le code HTML correspondant à ce sélecteur. Voici le code avec le sélecteur :
.eee .bbb .kkk {
color: red;
}
