Le pseudo classi CSS - gli elementi della User Interface

Go to the profile of  Jacopo Kahl
Jacopo Kahl
3 min di lettura
Le pseudo classi CSS - gli elementi della User Interface

CSS 3 ha introdotto una serie di pseudo-classi per l'interfaccia utente che vengono utilizzate per dare uno stile agli elementi interattivi in ​​base al loro stato attuale.

enabled e disabled

Le pseudo-classi :enabled e :disabled corrispondono a qualsiasi elemento del tipo selezionato con stato abilitato o disabilitato. Si applicano solo a elementi interattivi che possono essere abilitati o disabilitati, come gli elementi dei form.

input:enabled { background-color: white; }
input:disabled { background-color: black; }

Il seguente form contiene un input abilitato e uno disabilitato, che sono interessati da queste due regole:

<form>
    <input type="text" name="enabled">
    <input type="text" name="disabled" disabled>
</form>

checked

La pseudo-classe :checked corrisponde a elementi che si trovano in uno stato selezionato. Può essere utilizzato solo sulle check box, sui radio button e sugli elementi <option>.

input[type="checkbox"]:checked {}

Questa regola corrisponde a tutte le check box selezionate nella pagina Web.

<form>
    <input type="checkbox">
</form>

valid e invalid

Le pseudo-classi :valid e :invalid sono utilizzate per fornire feedback agli utenti durante la compilazione dei form. I browser moderni possono eseguire una validazione del campo basata sul tipo di input di un elemento del form e, insieme a
queste pseudo-classi, determinano se il risultato potrà essere usato per dare uno stile all'elemento di input.

input:valid { background: green; }
input:invalid { background: red; }

Nell'esempio che segue sono indicati due campi, uno obbligatorio e uno facoltativo. Il primo campo non sarà valido fino a quando non verrà inserita un'e-mail. Il secondo campo, essendo facoltativo, rimane valido anche se lasciato vuoto.

<form>
    <input type="email" required>
    <input type="email">
</form>

required e optional

Quando un campo nei form è richiesto viene utilizzate la pseudo-classe :required. La pseudo-classe :optional invece fa il contrario: essa corrisponde a elementi di input che non hanno il campo richiesto nella compilazione.

input:required { color: red; }
input:optional { color: yellow; }

Il seguente form contiene un elemento di input richiesto e uno opzionale:

<form>
    <input type="email" required>
    <input type="url">
</form>

out-of-range e in-range

Un elemento di input può includere gli attributi min e max per definire l'intervallo di valori per un dato elemento. Le pseudo-classi :out-of-range e :in-range possono essere applicate agli elementi che sono dentro o fuori ad un certo intervallo di valori di riferimento.

input:out-of-range { color: red; }
input:in-range { color: green; }

Il seguente form mostra due campi di input con gli attributi min e max:

<form>
    <input type="number" min="1" max="10">
    <input type="date" min="1986-11-02">
</form>

read-write e read-only

Gli elementi di input che includono l'attributo di sola lettura non possono essere modificati. Gli elementi che non possono essere modificati hanno come pseudo-classe di riferimento :read-only. Al contrario qualsiasi elemento che può essere modificato può essere selezionato con la pseudo-classe :read-write.

input:read-only { color: white; }
input:-moz-read-only { color: white; }
input:read-write { color: black; }
input:-moz-read-write { color: black; }

Il prefisso -moz- è necessario per tutte le versioni di Firefox. Il seguente esempio mostra l'assegnazione dell'attributo read-only ad un elemento di input del form.

<form>
    <input type="text" value="unavailable" readonly>
</form>

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

I Colori in CSS
3 min di lettura
Specificità in CSS
3 min di lettura
I selettori CSS di relazione
3 min di lettura