Corso CSS di base n. 4 – Le Pseudoclassi

Le pseudoclassi dei CSS sono uno strumento potente per aggiungere interattività e stile dinamico ai tuoi design web.
Sono selettori speciali che consentono di applicare stili a elementi HTML in base a determinate condizioni o stati.
In questo post, esploreremo alcune delle pseudoclassi più comuni e ti forniremo esempi pratici di come utilizzarle per migliorare l’aspetto e l’esperienza del tuo sito.

 

Pseudo-classi CSS più popolari:

1. :hover – La pseudoclasse :hover è attivata quando l’utente posiziona il cursore su un elemento. Puoi sfruttarla per evidenziare o animare elementi quando il cursore viene passato sopra, come pulsanti o link.
Ad esempio:

.pseudo1:hover {
  color: red;
  text-decoration: underline;
}

2. :active – Questa pseudoclasse viene attivata quando un elemento viene selezionato o cliccato. È utile per fornire un feedback immediato agli utenti quando interagiscono con gli elementi interattivi.
Ad esempio:

.pseudo1:active {
  background-color: #ff0000;
  color: #ffffff;
}

3. :focus – La pseudoclasse :focus viene attivata quando un elemento riceve il focus. È particolarmente utile per fornire un feedback visivo quando gli utenti compilano moduli o interagiscono con elementi input.
Ad esempio:

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
  outline: none;
}

4. :nth-child() – Questa pseudoclasse consente di selezionare elementi specifici in base alla loro posizione all’interno di un genitore. Può essere utilizzata per creare layout alternativi o applicare stili a elementi specifici.
Ad esempio:

ul li:nth-child(even) {
  background-color: lightyellow;
  border: 2px solid orange;
  margin-bottom: 1px;
}

5. :first-child e :last-child – Queste pseudoclassi permettono di selezionare rispettivamente il primo e l’ultimo figlio di un genitore. Sono utili per applicare stili differenti a elementi di testo introduttivi o di chiusura.
Ad esempio:

ul li:first-child {
  font-weight: bold;
}

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

Le pseudoclassi dei CSS offrono una vasta gamma di possibilità per personalizzare l’aspetto e il comportamento degli elementi HTML sul tuo sito web.
Utilizzando le pseudoclassi correttamente, puoi creare un design web interattivo, intuitivo ed esteticamente gradevole.
Spero che questo post ti abbia fornito una panoramica utile su alcune delle pseudoclassi più comuni e che tu sia pronto a sfruttarle per trasformare il tuo prossimo progetto web.

Scarica i files