Pseudo-classi

7.1 Pseudo-classi di stato

Le pseudo-classi in CSS sono parole chiave speciali che si aggiungono ai selettori per specificare lo stato di un elemento o la sua posizione nella struttura del documento. Consentono di applicare stili agli elementi in stati o situazioni particolari, che non possono essere indicate con i selettori normali.

Pseudo-classi principali:

• Pseudo-classi di stato
• Pseudo-classi di stato strutturale
• Pseudo-classi di forma
• Pseudo-classi di navigazione

Sintassi:

    
      selettore:pseudo-classe {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Pseudo-classi di stato

Queste pseudo-classi sono utilizzate per stilizzare gli elementi a seconda del loro stato attuale, ad esempio, quando si passa sopra con il mouse o quando un elemento è attivo:

• :hover — si applica quando l'utente passa il mouse su un elemento
• :active — si applica quando un elemento viene attivato (di solito quando viene cliccato)
• :focus — si applica quando un elemento è in focus (ad esempio, quando si usa la tastiera)
• :visited — si applica ai link visitati
• :link — si applica ai link non visitati

7.2 Pseudo-classe hover

La pseudo-classe :hover si applica a un elemento quando l'utente ci passa sopra con il mouse. È spesso utilizzata per cambiare l'aspetto dei link e dei pulsanti al passaggio del mouse.

Sintassi:

    
      selettore:hover {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

Questo selettore cambia il colore del testo e sottolinea i link quando si passa sopra con il mouse.

    
      <a href="#">Link placeholder</a>
    
  

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

Applicazione:

• Migliora l'interazione con l'utente (UI) grazie a un feedback visivo
• Usato per pulsanti, link e altri elementi interattivi

7.3 Pseudo-classe focus

La pseudo-classe :focus si applica a un elemento quando riceve il focus. Ad esempio, quando viene cliccato o quando ci si sposta su di esso con il tasto tab. È spesso usata per input e altri elementi di form.

Sintassi:

    
      selettore:focus {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

Questo selettore cambia il colore del bordo di un input e rimuove il contorno quando riceve il focus.

    
      <input type="text" name="text" id="text">
    
  

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

Applicazione:

• Migliora l'accessibilità delle pagine web
• Rende gli elementi interattivi più visibili quando sono in focus

7.4 Pseudo-classe nth-child

La pseudo-classe :nth-child si applica agli elementi basandosi sulla loro posizione tra gli elementi figli del genitore. Accetta un argomento che può essere un numero, una parola chiave o un'espressione.

Sintassi:

    
      selettore:nth-child(n) {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

Questo selettore consente di applicare stili agli elementi in base alla loro posizione tra i fratelli.

    
      <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
        <li>Elemento 5</li>
        <li>Elemento 6</li>
        <li>Elemento 7</li>
      </ul>
    
  

    
      /* Applica stili a tutti gli elementi figli dispari */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Applica stili a tutti gli elementi figli pari */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Applica stili al secondo elemento figlio */
      li:nth-child(2) {
          color: red;
      }
    
  

Applicazione:

• Stilizza righe di tabelle, elementi di liste e altre strutture ripetitive
• Consente di creare layout complessi e stile senza aggiungere classi extra

7.5 Esempi di utilizzo delle pseudo-classi

    
      <button type="button">Pulsante</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Stilizzazione delle righe pari di una tabella:

    
      <table>
        <tr>
          <th>Nome</th>
          <th>Quantità</th>
          <th>Prezzo</th>
        </tr>
        <tr>
          <td>Prodotto 1</td>
          <td>5</td>
          <td>10 €</td>
        </tr>
        <tr>
          <td>Prodotto 2</td>
          <td>3</td>
          <td>15 €</td>
        </tr>
        <tr>
          <td>Prodotto 3</td>
          <td>8</td>
          <td>7 €</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Esclusione di determinati elementi dallo stile generale:

    
      <ul>
        <li class="list-item">Elemento 1</li>
        <li class="list-item">Elemento 2</li>
        <li class="list-item">Elemento 3</li>
        <li class="list-item">Elemento 4</li>
        <li class="list-item">Elemento 5</li>
        <li class="list-item">Elemento 6</li>
        <li class="list-item">Elemento 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }