Selettori CSS in HTML5

I selettori CSS sono usati per identificare quali elementi HTML uno stile particolare sta per essere posizionato su di loro, per questo possiamo usare l'etichetta stile o un foglio di stile esterno. Immaginiamo per un momento di voler dare un certo aspetto al nostro documento, per questo dobbiamo sviluppare degli stili, tuttavia, per non ripetere il codice, l'ideale è usare gli stili per i selettori, ad esempio se vogliamo tutti i link all'elemento a sono di un colore particolare utilizzeremmo gli stili con il selettore per tipo.
Questo selettore interessa tutti gli elementi del documento, pur essendo il selettore più fondamentale, non è molto utilizzato poiché il suo ambito è molto ampio.
Vediamo un piccolo esempio di come funziona:

 Esempio
Mi piacciono le mele e le arance.

Visita il sito web del W3C 

Come possiamo vedere nell'esempio, diciamo allo stile con il selettore universale che tutti gli elementi avranno un bordo nero solido sottile, questo produce il seguente risultato:

Vediamo che lo stile è stato applicato a tutti gli elementi, questo non è molto piacevole da guardare al momento, ma fa il suo lavoro.
Con questo tipo di selezione possiamo selezionare e applicare uno stile a tutti gli elementi di un tipo specifico, in questo modo possiamo essere generali senza essere così ampi come con il selettore universale che abbiamo visto in precedenza.
Lavoriamo con il seguente esempio:

 Esempio
Mi piacciono le mele e le arance.
Visita il sito web del W3C 

Come possiamo vedere usiamo il tipo di elemento a A cui aggiungeremo il bordo nero su cui abbiamo lavorato nel tutorial, vediamo come appare sullo schermo:

Il risultato è leggermente migliore di quello generato con il selettore universale, poiché in questo caso solo i collegamenti hanno il bordo nero.
E se ora volessimo applicare uno stile ma solo a determinati elementi, indipendentemente dal loro tipo, ma non possiamo applicarlo all'intero documento, per questo possiamo usare il selettore per classi, con il selettore per classe possiamo ottenere un po' più esclusione quando si applica uno stile.
Vediamo il codice:

 Esempio Visita il sito web
Mi piacciono le mele e le arance.

Visita il sito web del W3C 

In questo caso abbiamo deciso di applicare lo stile a tutti gli elementi della classe classe2 possiamo vedere nel codice un elemento che ha due classi, tuttavia avendo la classe che specifichiamo prenderà anche lo stile. Con questo concludiamo questo tutorial sui selettori, ti consigliamo di continuare a fare pratica, combinando quanto abbiamo appreso, in modo da poter arricchire l'aspetto dei nostri siti e aumentare i loro standard di usabilità nel modo più efficace e semplice possibile.