Home esercizi css selettori di classe

Esercizi Selettori di Classe CSS

Metti alla prova la tua capacità di selezionare e stilizzare elementi HTML utilizzando selettori di classe in CSS. Pratica l’assegnazione e l’applicazione di stili specifici a gruppi di elementi con la stessa classe.

Esercizio 1

Crea una pagina HTML con un elemento di intestazione e un elemento di paragrafo. Aggiungi una classe "titolo" all'elemento di intestazione e una classe "testo" all'elemento di paragrafo. Usa i selettori di classi CSS per cambiare il colore del testo del titolo in blu e il colore del testo del paragrafo in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      .titolo {
        color: blue;
      }

      .testo {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 class="titolo">Titolo dell'intestazione</h1>
    <p class="testo">Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Aggiungi la classe "elenco" a ciascun elemento di lista. Usa il selettore di classe CSS per cambiare il colore del testo di tutti gli elementi di lista in rosso.

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

Esercizio 3

Crea una pagina HTML con un campo di input di tipo testo `input type="text"` e un elemento di intestazione. Aggiungi la classe "campo-input" al campo di input e la classe "titolo" all'elemento di intestazione. Usa i selettori di classe CSS per cambiare il colore del testo del campo di input in blu e il colore del testo dell'intestazione in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      .campo-input {
        color: blue;
      }

      .titolo {
        color: green;
      }
    </style>
  </head>
  <body>
    <input
      type="text"
      class="campo-input"
      placeholder="Inserisci il testo qui" />
    <h2 class="titolo">Titolo dell'intestazione</h2>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Aggiungi la classe "cella" a tutte le celle della tabella. Usa il selettore di classe CSS per cambiare il colore del testo di tutte le celle della tabella in grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      .cella {
        color: grey;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td class="cella">Riga 1, Colonna 1</td>
        <td class="cella">Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td class="cella">Riga 2, Colonna 1</td>
        <td class="cella">Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con tre paragrafi. Aggiungi la classe "paragrafo" a ciascun paragrafo. Usa il selettore di classe CSS per cambiare il colore del testo di tutti i paragrafi in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      .paragrafo {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="paragrafo">Questo è un paragrafo.</p>
    <p class="paragrafo">Questo è un altro paragrafo.</p>
    <p class="paragrafo">E ancora un altro paragrafo.</p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link. Aggiungi la classe "link" al link. Usa il selettore di classe CSS per cambiare il colore del testo del link in arancione.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      .link {
        color: orange;
      }
    </style>
  </head>
  <body>
    <a href="#" class="link">Questo è un link</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una casella di controllo (checkbox). Aggiungi la classe "checkbox" alla casella di controllo. Usa il selettore di classe CSS per cambiare il colore del testo della casella di controllo in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      .checkbox {
        color: green;
      }
    </style>
  </head>
  <body>
    <label>
      <input type="checkbox" class="checkbox" /> Seleziona questa casella
    </label>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un campo di input di tipo numero `input type="number"`. Aggiungi la classe "campo-input" al campo di input. Usa il selettore di classe CSS per cambiare il colore del testo all'interno del campo di input in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      .campo-input {
        color: blue;
      }
    </style>
  </head>
  <body>
    <input
      type="number"
      class="campo-input"
      placeholder="Inserisci un numero" />
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un elemento di intestazione. Aggiungi la classe "nascondi" all'elemento di intestazione. Usa il selettore di classe CSS per nascondere l'intestazione.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      .nascondi {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1 class="nascondi">Titolo dell'intestazione</h1>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un campo di input di tipo data (date picker) `input type="date"`. Aggiungi la classe "campo-input" al campo di input. Usa il selettore di classe CSS per cambiare il colore del testo del campo di input in rosso

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      .campo-input {
        color: red;
      }
    </style>
  </head>
  <body>
    <input type="date" class="campo-input" />
  </body>
</html>