Home esercizi css selettori combinati

Esercizi Combinatori CSS

Allenati nell’utilizzo dei selettori combinati in CSS per selezionare e stilizzare elementi in base alla loro relazione gerarchica o posizione nella struttura del documento. Sperimenta diverse combinazioni per ottenere stili precisi e ben mirati.

Esercizio 1

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Usa il combinatore "child" CSS per selezionare solo gli elementi che sono figli diretti della lista, quindi cambia il colore del testo di questi elementi in rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      ul > li {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un elemento di intestazione seguito da un elemento di paragrafo. Usa il combinatore "discendente" CSS per selezionare solo il paragrafo che è discendente dell'intestazione, quindi cambia il colore del testo del paragrafo in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      h1 p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Titolo dell'intestazione</h1>
    <p>Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Usa il combinatore "fratello" CSS per selezionare solo gli elementi che sono fratelli diretti tra loro, quindi cambia il colore del testo di questi elementi in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      li + li {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Usa il combinatore "discendente" CSS per selezionare solo le celle che sono discendenti delle righe `tr`, quindi cambia il colore del testo di queste celle in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      tr td {
        color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Usa il combinatore "child" CSS per selezionare solo il secondo elemento `li` che è figlio diretto dell'elemento `ul`, quindi cambia il colore del testo di questo elemento in rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      ul > li:nth-child(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un elemento di intestazione seguito da un elemento di paragrafo. Usa il combinatore "discendente" CSS per selezionare solo il paragrafo che è discendente diretto dell'intestazione, quindi cambia il colore del testo del paragrafo in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      h1 > p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Titolo dell'intestazione</h1>
    <p>Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Usa il combinatore "fratello" CSS per selezionare solo il secondo e il terzo elemento `li` che sono fratelli diretti tra loro, quindi cambia il colore del testo di questi elementi in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      li + li {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Usa il combinatore "discendente" CSS per selezionare solo le celle `td` che sono discendenti delle righe `tr`, quindi cambia il colore del testo di queste celle in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      tr td {
        color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un campo di input di tipo testo e un bottone. Usa il combinatore "fratello" CSS per selezionare solo il bottone che segue immediatamente il campo di input, quindi cambia il colore del testo del bottone in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      input[type="text"] + button {
        color: green;
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="Inserisci un testo" />
    <button>Clicca qui</button>
  </body>
</html>

Esercizio 10 (Super Difficile)

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista Usa il combinatore "child" CSS per selezionare solo il primo e il secondo elemento `li` che sono figli diretti dell'elemento `ul`, quindi cambia il colore del testo di questi elementi in rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      ul > li:nth-child(-n + 2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>