Esercizi Pseudo Classi CSS

Codegrind Team•Jul 16 2023

Esplora il potere delle pseudoclassi in CSS e come possono essere utilizzate per selezionare e stilizzare elementi HTML in diverse situazioni. Pratica l’uso di pseudoclassi come “:hover” e “:focus” per creare interattività e feedback visivi.

Esercizio 1

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una pseudo-classe CSS in modo che gli elementi diventino rossi quando il cursore del mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      li:hover {
        color: red;
      }
    </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 2

Crea una pagina HTML con un link e applica una pseudo-classe CSS in modo che il colore del link diventi verde quando viene visitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a:visited {
        color: green;
      }
    </style>
  </head>
  <body>
    <a href="#">Link visitato</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un pulsante. Applica una pseudo-classe CSS in modo che il colore del pulsante diventi blu quando il cursore del mouse vi passa sopra e rosso quando il pulsante è cliccato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      button:hover {
        background-color: blue;
      }

      button:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>Clicca qui</button>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una tabella contenente diverse righe. Applica una pseudo-classe CSS in modo che le righe pari della tabella abbiano un colore di sfondo grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      tr:nth-child(even) {
        background-color: lightgrey;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1</td>
      </tr>
      <tr>
        <td>Riga 2</td>
      </tr>
      <tr>
        <td>Riga 3</td>
      </tr>
      <!-- Aggiungi altre righe <tr> qui -->
    </table>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una pseudo-classe CSS in modo che gli elementi diventino grigi quando sono selezionati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      li:active {
        color: grey;
      }
    </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 6

Crea una pagina HTML con una lista ordinata contenente diverse righe. Applica una pseudo-classe CSS in modo che il testo delle righe pari diventi grassetto.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      li:nth-child(even) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Riga 1</li>
      <li>Riga 2</li>
      <li>Riga 3</li>
      <!-- Aggiungi altre righe <li> qui -->
    </ol>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un link. Applica una pseudo-classe CSS in modo che il link diventi rosso quando vi si passa sopra e blu quando è attivo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      a:hover {
        color: red;
      }

      a:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <a href="#">Link</a>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una pseudo-classe CSS in modo che gli elementi diventino grigi quando il mouse vi passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li:hover {
        color: grey;
      }
    </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 9

Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Applica una pseudo-classe CSS in modo che gli elementi diventino blu quando il mouse vi passa sopra e arancioni quando sono selezionati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      li:hover {
        color: blue;
      }

      li:active {
        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 10

Crea una pagina HTML con una tabella contenente diverse righe. Applica una pseudo-classe CSS in modo che le righe dispari della tabella abbiano un colore di sfondo grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      tr:nth-child(odd) {
        background-color: lightgrey;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1</td>
      </tr>
      <tr>
        <td>Riga 2</td>
      </tr>
      <tr>
        <td>Riga 3</td>
      </tr>
      <!-- Aggiungi altre righe <tr> qui -->
    </table>
  </body>
</html>