Una regola di stile di CSS è composta da un selettore e da una dichiarazione.

Il selettore dice a quali elementi della pagina la dichiarazione deve essere applicata. E’ un po’ come dire a quali tag un determinato colore, effetto grafico, font e altro debba essere applicato. Ecco, questo è un selettore!

Una dichiarazione invece, è l’insieme di caratteristiche grafiche che vengono specificate.

Nel post di oggi passerò in rassegna alcuni dei selettori più utilizzati.

Nella tabella seguente trovate l’elenco dei selettori. Nel codepen sotto la tabella troverete almeno un esempio per ciascun selettore.

Le dichiarazioni invece, saranno trattate nei prossimi articoli.

Happy coding! 🙂

Selettore Esempio Descrizione dell’esempio
.class .intro Seleziona tutti gli elementi con la classe=”intro”
#id #firstname Seleziona tutti gli elementi con #id=”firstname”
* * Seleziona tutti gli elementi
element p Seleziona tutti gli elementi p
element, element div, p Seleziona tutti gli elementi <div> e tutti gli elementi <p>
 element element div p  Seleziona tutti gli elementi <p> all’interno dell’elemeno <div>
 element > element  div > p  Seleziona tutti gli elementi <p> dove l’elemento <div> è genitore
 element + element  div + p  Seleziona tutti gli elementi <p> che sono immediatamente posizionati dopo gli elementi <div>
 :active  a:active  Seleziona i link attivi
 :first-child  p:first-child  Seleziona ogni elemento <p> che è il primo figlio del suo genitore
:hover a:hover Seleziona i link facendoli cambiare colore quando ci passi sopra con il mouse
:nth-child(n) p:nth-child(2) Seleziona ogni elemento <p> che è secondo figlio del suo genitore
::selection ::selection Seleziona la porzione di un elemento che è selezionato da un utente
:visited a:visited Seleziona tutti i link visitati


1




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.