Utilisation des id en CSS
Lors de l'utilisation de id, toutes les
manipulations avec les sélecteurs que nous avons étudiées
dans les leçons précédentes sont disponibles.
Exemple
Supposons que nous ayons le code suivant :
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Sélectionnons le h2 de l'élément avec le id
égal à block et colorons-le en rouge :
#block h2 {
color: red;
}
Maintenant, sélectionnons les p de l'élément avec
le id égal à block et colorons-les
en vert :
#block p {
color: green;
}
Exemple
Supposons maintenant que nous ayons le code suivant :
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Sélectionnons les éléments avec la classe header,
se trouvant à l'intérieur de l'élément avec le id
égal à block, et colorons-les en rouge :
#block .header {
color: red;
}
Maintenant, sélectionnons les titres h2 avec la classe
header, se trouvant à l'intérieur de l'élément
avec le id égal à block, et colorons-les
en rouge :
#block h2.header {
color: red;
}
Problèmes pratiques
Écrivez un sélecteur qui sélectionnera tous les h2,
se trouvant dans l'élément avec le id égal à
elem. Testez votre sélecteur sur le code
suivant :
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe text, se trouvant dans l'élément
avec le id égal à elem. Testez
votre sélecteur sur le code suivant :
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
avec la classe text, se trouvant dans l'élément
avec le id égal à elem. Testez
votre sélecteur sur le code suivant :
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Écrivez un sélecteur qui sélectionnera tous les li
avec la classe text, se trouvant dans l'élément
avec le id égal à elem. Testez
votre sélecteur sur le code suivant :
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
