Home esercizi css selettori di attributo

Esercizi Selettori di Attributo CSS

Metti alla prova le tue competenze nell’utilizzo dei selettori di attributo in CSS per selezionare e stilizzare elementi HTML in base ai loro attributi. Pratica l’applicazione di stili basati su attributi specifici.

Esercizio 1

Crea una pagina HTML con un campo di input di tipo testo e un bottone. Utilizza il selettore di attributo CSS per selezionare solo il bottone che ha l'attributo "disabled" e cambia il colore del testo del bottone in rosso.

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

Esercizio 2

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Utilizza il selettore di attributo CSS per selezionare solo gli elementi che hanno l'attributo "class" con il valore "importante" e cambia il colore del testo di questi elementi in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      li[class="importante"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="importante">Elemento 1</li>
      <li>Elemento 2</li>
      <li class="importante">Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un campo di input di tipo email e un campo di input di tipo password. Utilizza il selettore di attributo CSS per selezionare solo il campo di input email, quindi cambia il colore del testo di questo campo in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      input[type="email"] {
        color: green;
      }
    </style>
  </head>
  <body>
    <input type="email" placeholder="Inserisci la tua email" />
    <input type="password" placeholder="Inserisci la tua password" />
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un link e un'immagine. Utilizza il selettore di attributo CSS per selezionare solo il link che ha l'attributo "href" che inizia con "https", quindi cambia il colore del testo del link in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      a[href^="https"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <a href="https://www.example.com">Questo è un link</a>
    <img src="image.jpg" alt="Immagine di esempio" />
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Utilizza il selettore di attributo CSS per selezionare solo gli elementi che hanno l'attributo "class" che termina con "item", quindi cambia il colore del testo di questi elementi in rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      li[class$="item"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="menu-item">Elemento 1</li>
      <li>Elemento 2</li>
      <li class="list-item">Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un campo di input di tipo testo e un bottone. Utilizza il selettore di attributo CSS per selezionare solo il bottone che ha l'attributo "type" con il valore "submit", quindi cambia il colore del testo del bottone in verde.

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

Esercizio 7

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Utilizza il selettore di attributo CSS per selezionare solo le celle che hanno l'attributo "data-value" e il valore "important", quindi cambia il colore del testo di queste celle in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      td[data-value="important"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td data-value="important">Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Utilizza il selettore di attributo CSS per selezionare solo gli elementi che hanno l'attributo "class" che contiene la parola "importante", quindi cambia il colore del testo di questi elementi in verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li[class*="importante"] {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="menu-importante-item">Elemento 1</li>
      <li>Elemento 2</li>
      <li class="list-importante-item">Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un link e un'immagine. Utilizza il selettore di attributo CSS per selezionare solo il link che ha l'attributo "href" contenente la parola "example", quindi cambia il colore del testo del link in rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      a[href*="example"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.example.com">Questo è un link</a>
    <img src="image.jpg" alt="Immagine di esempio" />
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Utilizza il selettore di attributo CSS per selezionare solo gli elementi che hanno l'attributo "data-color" e cambia il colore del testo di questi elementi in blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      li[data-color] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li data-color="blue">Elemento 1</li>
      <li>Elemento 2</li>
      <li data-color="red">Elemento 3</li>
    </ul>
  </body>
</html>