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 :

html<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 :

css#block h2 {
  color: red;
}

Maintenant, sélectionnons les p de l'élément avec le id égal à block et colorons-les en vert :

css#block p {
  color: green;
}

Exemple

Supposons maintenant que nous ayons le code suivant :

html<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 :

css#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 :

css#block h2.header {
  color: red;
}

Problèmes pratiques

Задание 1

É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 :

html<div id="elem">
  <h2>Choose</h2>
  <p>---</p>
  
  <h2>Choose</h2>
  <p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Задание 2

É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 :

html<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>

Задание 3

É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 :

html<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>

Задание 4

É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 :

html<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>