Concetti avanzati di CSS: ereditarietà e pseudo classi

Saper selezionare gli elementi all’interno delle vostre pagine HTML è una competenza fondamentale, se volete riuscire a sviluppare ottimi siti web, e per fortuna nostra esistono moltissimi altri selettori che possiamo andare a scoprire.

Ma prima ancora di avventurarci alla scoperta dei nuovi selettori c’è una caratteristica che dobbiamo imparare a padroneggiare egregiamente e che ci permetterà di risolvere non pochi grattacapi.

Ereditarietà

Riferendoci ai CSS come fogli di stile omettiamo una parola molto importante che deriva da questo acronimo. In inglese, Cascading Style Sheet, significa fogli di stile a cascata. Questo introduce un concetto molto interessante dove le regole che vengono applicate ad un elemento contenitore, vengono automaticamente applicate agli elementi contenuti.

Facciamo subito un esempio, createvi una semplicissima pagina HTML con un pò di testo al suo interno, magari impostando degli ID ai vari paragrafi, e andate ad inserire all’interno del file CSS quanto segue:

  body { color: red; }

A questo punto non ci resta che aggiornare il browser e potremmo notare che tutti i nostri testi sono diventati rossi! Infatti, essendo i nostri paragrafi elementi contenuti in body, questi ereditano il valore dalla proprietà color impostato su di esso.

Se vogliamo andare ancora più nello specifico, dobbiamo capire che esistono dei metodi che ci permettono di aggirare questa caratteristica.

La prima soluzione è infatti quella di utilizzare un type selector, che ci permette di selezionare i nostri paragrafi, e modificarne il colore; ma grazie agli ID che abbiamo impostato potremmo selezionare ogni elemento e impostare un colore diverso.

Nel mio caso, in cui il mio paragrafo ha un ID pari a #rosso, cosa succede se scriviamo le seguenti regole?

  p { color: black; }  #rosso { color: #ff0000; }

Con questo esempio dimostriamo che anche i vari selettori hanno una precedenza e quando usiamo ID selector possiamo sovrascrivere le regole impostate in modo generale.

Conosciuta l’ereditarietà possiamo passare oltre ed andare a vedere alcuni nuovi selettori. Il primo che vi voglio presentare prende il nome di pseudo-classe e ci permette di personalizzare un elemento in base al suo stato.

Ad esempio vi siete mai chiesti come sia possibile modificare lo stile di un elemento quando il cursore del mouse vi passa sopra?

Per rispondere a questa domanda vi basterà utilizzare la pseudo-classe :hover sull’elemento da modificare ed impostare le nuove regole. Riprendiamo l’esempio del nostro paragrafo ed adesso aggiungiamo la seguente regola:

  #rosso { color: #ff0000; }  #rosso:hover { color: #000000; background: #ff0000; }

Possiamo vedere immediatamente come si usa questa pseudo-classe, basta posizionarla immediatamente dopo l’elemento che vogliamo personalizzare ed impostare le nuove regole.La prossima immagine di mostra il risultato di questo nuovo selettore, la parte destra rappresenta quella con il mouse sopra di esso.

:hover è soltanto una delle pseudo-classi che possiamo utilizzare, altre molto utili sono:

• :visited che ci permette di modificare le regole di un collegamento già visualizzato;
• :nth-child permette di selezionare un elemento in base alla sua posizione all’interno di un contenitore, permette anche di selezionare gli elementi pari, dispari e di qualsiasi altro frequenza si desideri;
• :focus ci permette di selezionare la gli elementi input e textarea dopo che sono stati selezionati dal nostro utente.

Questi sono soltanto alcuni delle pseudo-classi che andremo a conoscere, ma per non confondervi troppo vi lascio prima sperimentare con queste.