Home esercizi css selettori di id

Esercizi Selettori ID CSS

Esplora come selezionare e personalizzare elementi HTML con selettori di ID in CSS. Allenati nell’utilizzo di ID univoci per applicare stili distintivi a elementi specifici della pagina.

Esercizio 1

Crea una pagina HTML con un elemento di intestazione e un elemento di paragrafo. Aggiungi l'ID "titolo" all'elemento di intestazione e l'ID "testo" all'elemento di paragrafo. Usa i selettori di ID 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 id="titolo">Titolo dell'intestazione</h1>
    <p id="testo">Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista `li`. Aggiungi l'ID "elenco" a tutto l'elemento `ul`. Usa il selettore di ID 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 li {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul id="elenco">
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>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 l'ID "campo-input" al campo di input e l'ID "titolo" all'elemento di intestazione. Usa i selettori di ID 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" id="campo-input" placeholder="Inserisci il testo qui" />
    <h2 id="titolo">Titolo dell'intestazione</h2>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Aggiungi l'ID "tabella" a tutto l'elemento tabella. Usa il selettore di ID CSS per cambiare il colore del testo di tutte le celle della tabella in grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      #tabella td {
        color: grey;
      }
    </style>
  </head>
  <body>
    <table id="tabella">
      <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 tre paragrafi. Aggiungi l'ID "paragrafo" a ciascun paragrafo. Usa il selettore di ID 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 id="paragrafo">Questo è un paragrafo.</p>
    <p id="paragrafo">Questo è un altro paragrafo.</p>
    <p id="paragrafo">E ancora un altro paragrafo.</p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link. Aggiungi l'ID "link" al link. Usa il selettore di ID 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="#" id="link">Questo è un link</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una casella di controllo (checkbox). Aggiungi l'ID "checkbox" alla casella di controllo. Usa il selettore di ID 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" id="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 l'ID "campo-input" al campo di input. Usa il selettore di ID 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" id="campo-input" placeholder="Inserisci un numero" />
  </body>
</html>

Esercizio 9

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

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