Pseudoclassi di stato

2.1 Pseudoclasse :hover

Le pseudoclassi di stato permettono di applicare stili agli elementi in base alla loro interazione con l'utente o al loro stato corrente. Queste pseudoclassi sono spesso utilizzate per migliorare l'interfaccia utente, fornendo feedback visivi alle azioni dell'utente.

La pseudoclasse :hover viene applicata a un elemento quando l'utente posiziona il cursore su di esso.

Sintassi:

    
      selettore:hover {
        proprietà: valori;
      }
    
  

Esempio:

In questo esempio, il link cambia colore e aggiunge una sottolineatura al passaggio del mouse, mentre il pulsante cambia il colore dello sfondo e del testo.

    
      /* Stilizzazione del link al passaggio del mouse */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stilizzazione del pulsante al passaggio del mouse */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudoclasse :focus

La pseudoclasse :focus viene applicata a un elemento quando riceve il focus, ad esempio, quando si fa clic su un elemento del modulo o ci si naviga con il tasto Tab.

Sintassi:

    
      selettore:focus {
        proprietà: valori;
      }
    
  

Esempio:

In questo esempio, il campo di input cambia il colore del bordo e rimuove il contorno quando è a fuoco, mentre il campo di testo cambia il colore dello sfondo.

    
      /* Stilizzazione del campo di input quando è a fuoco */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Stilizzazione del campo di testo quando è a fuoco */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudoclasse :active

La pseudoclasse :active viene applicata a un elemento nel momento in cui viene attivato dall'utente, ad esempio quando si preme un pulsante del mouse. Questa pseudoclasse è spesso utilizzata per creare feedback visivi quando si premono gli elementi dell'interfaccia.

Sintassi:

    
      selettore:active {
        proprietà: valori;
      }
    
  

Esempio:

In questo esempio, il link cambia colore al momento del click, mentre il pulsante cambia il colore dello sfondo e si riduce leggermente, creando un effetto di pressione.

    
      /* Stilizzazione del link al momento del click */

      a:active {
        color: green;
      }

      /* Stilizzazione del pulsante al momento del click */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudoclasse :visited

La pseudoclasse :visited viene applicata ai link già visitati dall'utente. Consente di stilizzare i link visitati in modo diverso rispetto a quelli non visitati.

Sintassi:

    
      selettore:visited {
        proprietà: valori;
      }
    
  

Esempio

In questo esempio, il link visitato cambia colore in viola per distinguersi da quelli non visitati:

    
      /* Stilizzazione del link visitato */

      a:visited {
        color: purple;
      }
    
  

2.5 Combinazione di pseudoclassi

Le pseudoclassi di stato possono essere combinate per creare stili interattivi complessi. Ad esempio, è possibile impostare stili diversi per i link a seconda del loro stato.

Esempio di implementazione completa

In questo esempio, la stilizzazione dei link cambia in base al loro stato: stato base, link visitati, link al passaggio del mouse e link al momento del click:

    
      /* Stile base per i link */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Stilizzazione del link visitato */

      a:visited {
        color: purple;
      }

      /* Stilizzazione del link al passaggio del mouse */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stilizzazione del link al momento del click */

      a:active {
        color: green;
      }