Pratica con le combinazioni di selettori CSS
Scrivi un selettore che selezioni i paragrafi
posizionati all'interno dei div div. Verifica
il tuo selettore sul seguente codice:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Scrivi un selettore che selezioni tutti gli h2,
posizionati all'interno dei div div. Verifica
il tuo selettore sul seguente codice:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Scrivi un selettore che selezioni tutti i paragrafi
p dall'elemento con id uguale a
block. Verifica il tuo selettore sul seguente
codice:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Scrivi un selettore che selezioni tutti gli h2
dall'elemento con id uguale a block.
Verifica il tuo selettore sul seguente codice:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Scrivi un selettore che selezioni tutti gli elementi
con classe bbb. Verifica il tuo selettore
sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti gli elementi
con classe bbb dall'elemento con id
uguale a block. Verifica il tuo selettore
sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti i paragrafi
p con classe bbb. Verifica
il tuo selettore sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti gli h2
con classe bbb. Verifica il tuo selettore
sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti i paragrafi
p con classe bbb dall'elemento
con id uguale a block. Verifica
il tuo selettore sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti gli elementi
con classe bbb e gli elementi con classe
xxx simultaneamente (cioè devi raggruppare
i selettori con una virgola). Verifica il tuo selettore
sul seguente codice:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Scrivi un selettore che selezioni tutti i paragrafi
p con classe bbb e simultaneamente
tutti gli h2 con classe xxx. Verifica
il tuo selettore sul seguente codice:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Scrivi un selettore che selezioni tutti i paragrafi
p con classe bbb dall'elemento
con id uguale a block e simultaneamente
tutti i paragrafi p con classe xxx
dall'elemento con id uguale a block.
Verifica il tuo selettore sul seguente codice:
<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>
Scrivi un selettore che selezioni tutti gli elementi
con classe fff. Verifica il tuo selettore
sul seguente codice:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Scrivi un selettore che selezioni tutti i paragrafi
p dall'elemento con classe fff.
Verifica il tuo selettore sul
seguente codice:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Scrivi un selettore che selezioni tutti i paragrafi
p con classe fff. Verifica
il tuo selettore sul seguente codice:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Scrivi un selettore che selezioni tutti gli elementi
con classe bbb dall'elemento con classe
fff. Verifica il tuo selettore sul seguente
codice:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Scrivi un selettore che selezioni tutti gli h2
con classe bbb dall'elemento con classe
fff. Verifica il tuo selettore sul seguente
codice:
<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>
