css-Pseudo-Classes-thumbnail

Le pseudo-class sono un insieme di parole chiave, ognuna con un specifico scopo, che si aggiungono ai selettori per modificarli quando si trovano in un determinata situazione. Grazie alle pseudo-class i selettori possono svolgere delle funzioni speciali: ci permettono di aggiungere stile quando il contenuto si trova in un certo stato oppure vengono attivate quando l’utente compie una certa azione.

Sintassi:

selector:pseudo-class {
  property: value;
}

Ci sono diverse categorie di pseudo-class, ad esempio alcune fanno riferimento alla struttura HTML, altre si usano nei form, i moduli che compiliamo quando inseriamo dati nelle pagine web, altre ancora si attivano in base alle azioni che l’utente compie durante la navigazione. In questo tutorail tratteremo alcune tra quelle che si usano più spesso.

:hover

Fra le più usate c’è sicuramenta hover, questa entra in funzione quando l’utente passa sopra l’elemento con il cursore del mouse:

a:hover {
    color: red;
}

Possiamo anche inserire più dichiarazioni:

a:hover {
    color: red;
    font-size: 20px;
}

:active

Active entra in funzione quando si clicca su un elemento.

a:active {
    color: blue;
}

:first-child

Le pseudo-class con child si utilizzano per modificare elementi racchiusi in un altro elemento. First-child si usa quando l’obbiettivo è quello di modificare il primo elemento racchiuso in un altro elemento.

File HTML:

<div class="paragraphs">
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <p>Paragrafo 3</p>
   <p>Paragrafo 4</p>
   <p>Paragrafo 5</p>
   <p>Paragrafo 6</p>
   <p>Paragrafo 7</p>
   <p>Paragrafo 8</p>
   <p>Paragrafo 9</p>
   <p>Paragrafo 10</p>
</div>

File CSS:

p:first-child /* solo 'paragrafo 1' verrà modificato */  {
    color: orange;
}

:last-child

Last-child funziona come first-child ma al posto di prendere come target il primo elemento prende come target l’ultimo.

p:last-child /* solo 'paragrafo 10' verrà modificato */  {
color: orange;
}

:nth-child

Nth ci permette di modificare gli elementi in base a delle sequenze da noi impostate. Ad esempio, se vogliamo modificare solo paragrafo 3 possiamo usare il seguente codice:

p:nth-child(3) /* solo 'paragrafo 3' verrà modificato */  {
color: orange;
}

Il numero va messo fra parentesi e non deve avere spazi che lo separano. Se vogliamo applicare lo stile a tutti gli elementi pari useremo il seguente codice:

p:nth-child(even) /* verreno modificati i paragrafi 2-4-6-8-10 */ {
color: orange;
}

Mentre se vogliamo modificare i paragrafi dispari useremo il seguente:

p:nth-child(odd) /* verreno modificati i paragrafi 1-3-5-7-9 */ {
color: orange;
}

Con nth possiamo anche prendere come target un elemento ogni tre, o ogni quattro, o ogni qualsiasi numero vogliamo. Basta aggiungere n dopo il numero che determina gli intervalli.

p:nth-child(3n) /* verreno modificati i paragrafi 3-6-9 */ {
    color: orange;
}

Si può inoltre impostare da che child farlo partire, di default parte da 0, ma se vogliamo farlo partire da uno basta aggiunger +1 dopo n.

p:nth-child(3n+1) /* verreno modificati i paragrafi 1-4-7-10 */ {
color: orange;
}

:focus

Quando l’utente sta compilando un modulo e vogliamo focalizzare la sua attenzione su un determinato campo possiamo usare la pseudo-class focus, possiamo, ad esempio, modifiacare il colore del back-ground quando l’utente ci clicca sopra per inserire i dati.

File HTML:

 <form>
     Nome: <input type="text" name="firstName" required><br>
     Cognome: <input type="text" name="secondName"><br>
     <input type="submit" value="Invia">
    </form>

File CSS:

input:focus {
background-color: chartreuse;
}

:required

Quando vogliamo che l’utente sia obbligato a inserire i dati in specifico campo aggiungiamo l’attributo required nel tag input (vedi form nel file HTML). Possiamo dare rilevanza a quel campo grazie alla pseudo-class required.

input:required {
border: 2px solid red;
}

Le pseudo class si utilizzano soprattutto per enfatizarre, dare importanza, ad un elemento quando si trova in un certo stato, bisogna applicarle con attenzione e quando serve così da aiutare l’utente durante la navigazione.


Guarda il video:

Articoli simili