Home esercizi css figli di elementi

Esercizi Figli di Elementi CSS

Ecco degli esercizi in italiano sull’utilizzo delle regole CSS :first-child, :last-child, :nth-child, :first-of-type, :last-of-type e :nth-of-type, con le relative soluzioni.

Esercizio 1

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una regola CSS in modo che il primo elemento della lista abbia un colore di sfondo rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      li:first-child {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1 (Rosso)</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista ordinata contenente diversi elementi. Applica una regola CSS in modo che l'ultimo elemento della lista abbia un colore di sfondo blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      li:last-child {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3 (Blu)</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ol>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una regola CSS in modo che il secondo elemento della lista abbia un colore di sfondo verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      li:nth-child(2) {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2 (Verde)</li>
      <li>Elemento 3</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una regola CSS in modo che l'ultimo elemento della lista abbia un colore di sfondo arancione.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li:nth-last-child(1) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un paragrafo e un elemento `span` all'interno del paragrafo. Applica una regola CSS in modo che il primo elemento `span` all'interno del paragrafo abbia un colore di sfondo giallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      p span:first-of-type {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un esempio di testo con un
      <span style="color: white; background-color: black;">span</span> e un
      altro
      <span style="color: white; background-color: black;">span</span>
      all'interno.
    </p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un paragrafo e un elemento `span` all'interno del paragrafo. Applica una regola CSS in modo che l'ultimo elemento `span` all'interno del paragrafo abbia un colore di sfondo viola.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      p span:last-of-type {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un esempio di testo con un
      <span style="color: white; background-color: black;">span</span> e un
      altro
      <span style="color: white; background-color: black;">span</span> viola.
    </p>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una lista ordinata contenente diversi elementi. Applica una regola CSS in modo che ogni terzo elemento della lista abbia un colore di sfondo azzurro.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      li:nth-child(3n) {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3 (Azzurro)</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
      <li>Elemento 6 (Azzurro)</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ol>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista ordinata contenente diversi elementi. Applica una regola CSS in modo che ogni quarto elemento della lista abbia un colore di sfondo rosa.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li:nth-child(4n) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4 (Rosa)</li>
      <li>Elemento 5</li>
      <li>Elemento 6</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ol>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una regola CSS in modo che il secondo elemento li di tipo "cerchio" abbia un colore di sfondo verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      li[type="circle"]:nth-of-type(2) {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li type="disc">Elemento 1</li>
      <li type="circle">Elemento 2 (Verde)</li>
      <li type="square">Elemento 3</li>
      <li type="circle">Elemento 4</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un paragrafo e un elemento `span` all'interno del paragrafo. Applica una regola CSS in modo che il primo elemento `span` di tipo "evidenzia" abbia un colore di sfondo giallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      p span[type="evidenzia"]:first-of-type {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un esempio di testo con un
      <span style="color: white; background-color: black;" type="evidenzia"
        >span</span
      >
      e un altro
      <span style="color: white; background-color: black;">span</span>
      all'interno.
    </p>
  </body>
</html>