Introduzione ai Pseudoclassi

1.1 Pseudoclassi

Le pseudoclassi in CSS sono parole chiave speciali che vengono aggiunte ai selettori per indicare lo stato o la posizione nel documento. Permettono di stilizzare gli elementi in base al loro stato o relazione con altri elementi senza la necessità di aggiungere classi o ID nel codice HTML.

Concetti principali delle pseudoclassi

1. Definizione dello stato dell'elemento:
   • Le pseudoclassi possono indicare lo stato dell'elemento, come il passaggio del mouse, il focus o l'attivazione.
2. Definizione della posizione dell'elemento:
   • Le pseudoclassi possono indicare la posizione di un elemento rispetto al suo genitore o altri elementi, come il primo o l'ultimo.
3. Casi speciali e gruppi logici:
   • Le pseudoclassi possono anche definire casi speciali, come il primo elemento di un tipo o elementi dispari/pari.

Come utilizzare le pseudoclassi

Le pseudoclassi vengono aggiunte al selettore usando i due punti (:). Possono essere utilizzate sia con selettori di elementi, sia con classi, ID e altri selettori.

Sintassi:

    
      selettore:pseudoclasse {
        proprietà: valori;
      }
    
  

Esempi di utilizzo

1. Selettore di un elemento con pseudoclasse

In questo esempio, tutti i primi paragrafi (<p>) all'interno dei loro elementi genitori saranno in grassetto:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Selettore di una classe con pseudoclasse

In questo esempio, lo sfondo di tutti gli elementi con la classe .button diventerà blu quando si passa con il mouse:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Selettori combinati con pseudoclassi

In questo esempio, tutti i paragrafi pari (<p>) all'interno degli elementi con classe .container saranno rossi:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Esempi di pseudoclassi e il loro utilizzo

1. Pseudoclassi che definiscono lo stato

Le pseudoclassi che definiscono lo stato di un elemento consentono di cambiarne la stilizzazione in base all'interazione dell'utente o allo stato dell'elemento.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudoclassi che definiscono la posizione

Le pseudoclassi che definiscono la posizione di un elemento consentono di applicare stili agli elementi in base alla loro posizione nella struttura DOM.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudoclassi per gruppi logici

Queste pseudoclassi consentono di stilizzare gli elementi in base ai loro gruppi logici o tipi.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }