Pratique sur les combinaisons de sélecteurs CSS
Écrivez un sélecteur qui sélectionnera les paragraphes,
situés à l'intérieur des divs div. Testez
votre sélecteur sur le code suivant :
html<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Écrivez un sélecteur qui sélectionnera tous les h2,
situés à l'intérieur des divs div. Testez
votre sélecteur sur le code suivant :
html<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p de l'élément avec id égal à
block. Testez votre sélecteur sur le code
suivant :
html<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Écrivez un sélecteur qui sélectionnera tous les h2
de l'élément avec id égal à block.
Testez votre sélecteur sur le code suivant :
html<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe bbb. Testez votre sélecteur
sur le code suivant :
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe bbb de l'élément avec id,
égal à block. Testez votre sélecteur
sur le code suivant :
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p avec la classe bbb. Testez
votre sélecteur sur le code suivant :
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Écrivez un sélecteur qui sélectionnera tous les h2
avec la classe bbb. Testez votre sélecteur
sur le code suivant :
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p avec la classe bbb de l'élément
avec id, égal à block. Testez
votre sélecteur sur le code suivant :
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe bbb et les éléments avec la classe
xxx simultanément (c'est-à-dire que vous devez grouper
les sélecteurs par une virgule). Testez votre sélecteur
sur le code suivant :
html<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p avec la classe bbb et simultanément
tous les h2 avec la classe xxx. Testez
votre sélecteur sur le code suivant :
html<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p avec la classe bbb de l'élément
avec id, égal à block et simultanément
tous les paragraphes p avec la classe xxx
de l'élément avec id, égal à block.
Testez votre sélecteur sur le code suivant :
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe fff. Testez votre sélecteur
sur le code suivant :
html<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p de l'élément avec la classe fff.
Testez votre sélecteur sur
le code suivant :
html<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les paragraphes
p avec la classe fff. Testez
votre sélecteur sur le code suivant :
html<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Écrivez un sélecteur qui sélectionnera tous les éléments
avec la classe bbb de l'élément avec la classe
fff. Testez votre sélecteur sur le code suivant :
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Écrivez un sélecteur qui sélectionnera tous les h2
avec la classe bbb de l'élément avec la classe
fff. Testez votre sélecteur sur le code suivant :
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>