Eventi in CSS – Terza parte

Si procede con la terza parte. Vediamo come generare un evento css grazie alla pseudo-classe :focus
Eventi in CSS – Terza parte

Focus

In questa terza parte dedicata agli eventi in css affronteremo la modalità :focus. Concettualmente molto simile al metodo :target, la pseudo-classe :focus è applicabile ad un elemento nel momento in cui è focalizzato. Questa è particolarmente utilizzata nelle caselle input contenente il cursore di inserimento del testo , pronta a ricevere l’input dall’utente. Vediamo come funziona.

Codice html e CSS

E’ importante sapere che non tutti gli elementi html possono essere focalizzati. Nel nostro caso possiamo risolvere applicando l’attributo tabindex all’elemento span. Questo è spesso utilizzato quando con il tasto tabulazione si passa da un campo input all’altro. Quindi, riepilogando l’esempio, quando si fa clic sullo span esso si focalizza e il selettore generale fratello (~) fa il resto. Tutto molto semplice vero?

<span tabindex="0">Clicca</span>
<p class="change">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>



span:focus ~ .change{
    color:red;
}

Pro e contro

Data la leggerezza del codice html e css credo che finora la modalità Focus sia quella più idonea per generare un evento. Richiede solo “l’attivazione” dell’attributo tabindex per far si che tutto funzioni.

A presto con la quarta ed ultima parte dedicata agli eventi in css 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github