I selettori sono schemi (pattern) utilizzati nei fogli di stile per selezionare gli elementi a cui si vuole applicare uno stile. Nella guida CSS di base abbiamo già affrontato l’argomento spiegando dettagliatamente cos’è un selettore e quali sono i principali tipi di selettori supportati da CSS.
Come abbiamo detto nella lezione introduttiva di questa guida, CSS3 ha apportato delle novità in tema di selettori.
Selettori di CSS3
Oltre ai classici selettori per tipo, classe e per ID ne esistono diversi altri, alcuni dei quali già facevano parte delle specifiche di CSS 1 e 2. Riepilogheremo questi ultimi e aggiungeremo i nuovi selettori introdotti da CSS3, in modo da fornire all’utente una panoramica completa degli strumenti di selezione.
Selezionare elementi fratelli e figli
Selettore
Esempio
Descrizione
Livello CSS
elemento A elemento B
div p
seleziona gli elementi B contenuti in un elemento A
1
elemento A > elemento B
div > p
seleziona gli elementi B contenuti direttamente in un elemento A
2
elemento A + elemento B
div + p
seleziona tutti gli elementi B preceduti direttamente da un elemento A
2
elemento A ~ elemento B
img ~ a
seleziona tutti gli elementi B preceduti da un elemento A anche non direttamente
3
Selezionare in base all’attributo
Selettore
Esempio
Descrizione
Livello CSS
[attibuto]
[target]
seleziona gli elementi che dispongono di un dato attributo
2
[attributo=valore]
[target=_blank]
seleziona tutti gli elementi che hanno un determinato valore per uno specifico attributo
2
[attributo=~testo]
[scr~=immagine]
seleziona tutti gli elementi che contengono un determinato testo nel valore di uno specifico attributo
2
[attributo^=testo]
[href^=http]
seleziona tuti gli elementi in cui il valore per uno specifico attributo comincia con un dato testo
3
[attributo$=testo]
[src$=gif]
seleziona tuti gli elementi in cui il valore per uno specifico attributo termina con un dato testo
3
[attributo*=testo]
[src*=grande]
seleziona tuti gli elementi in cui il valore per uno specifico attributo contiene un dato testo
3
Pseudo-classi e pseudo-elementi supportati in CSS3
CSS3 ha introdotti rilevanti novità anche nell’ambito delle pseudo-classi e degli pseudo-elementi. Per chi desiderasse approfondire questi concetti, ancora una volta, si rimanda alla lettura della lezione dedicata all’interno della guida base a CSS.
Selezionare i collegamenti
Selettore
Esempio
Descrizione
Livello CSS
:link
a:link
Seleziona tutti i collegamenti non visitati
1
:visited
a:visited
Seleziona tutti i collegamenti visitati
1
:active
a:active
Seleziona tutti i collegamenti attivi
1
:hover
a:hover
Seleziona tutti i collegamenti su si colloca il puntatore del mouse
1
Selezionare gli elementi in base allo stato
Selettore
Esempio
Descrizione
Livello CSS
:focus
input:focus
Seleziona gli elementi che hanno il fuoco
2
:enabled
input:enabled
Seleziona tutti gli elementi attivati
3
:disabled
input:disabled
Seleziona tutti gli elementi disattivati
3
:checked
input:checked
Seleziona tutti gli elementi selezionati (si usa per radio button e checkbox)
3
::selection
::selection
Seleziona la porzione di un elemento (ad esempio un paragrafo di testo) selezionata dall’utente
3
Selezionare gli elementi in base alla posizione e al contenuto
Selettore
Esempio
Descrizione
Livello CSS
:first-letter
p:first-letter
Seleziona la prima lettera di un elemento
1
:first-line
p:first-line
Seleziona la prima riga di un elemento
1
:first-child
p:first-child
Seleziona il primo elemento figlio di un elemento
2
:first-of-type
p:first-of-type
Seleziona il primo elemento di un dato tipo contenuto in elemento padre
3
:last-of-type
p:last-of-type
Seleziona l’ultimo elemento di un dato tipo contenuto in elemento padre
3
:only-of-type
p:only-of-type
Seleziona un elemento se è il solo elemento di quel tipo contenuto in elemento padre
3
:only-child
p:only-child
Seleziona un elemento se è il solo elemento figlio di elemento padre
3
:nth-child(n)
p:nth-child(2)
Seleziona il secondo elemento di un dato tipo di un padre
3
:nth-last-child(n)
p:nth-last-child(2)
Seleziona il secondo elemento di un dato tipo di un padre contando dal fondo
3
:nth-of-type(n)
p:nth-of-type(2)
Seleziona l’ennesimo elemento di un dato tipo contenuto in un elemento padre
3
:last-child
p:last-child
Seleziona un elemento di un dato tipo se è l’ultimo contenuto in un elemento padre
3
:root
:root
Seleziona l’elemento radice del documento
3
:empty
div:empty
Seleziona ogni elemento di un dato tipo che non ha figli
3
Selezionare gli elementi in base a ciò che non sono
Selettore
Esempio
Descrizione
Livello CSS
:not(selettore)
:not(p)
Seleziona tutti gli elementi che non sono un certo selettore
3
Operare su ciò che viene prima o dopo
Selettore
Esempio
Descrizione
Livello CSS
:before
p:before
Inserisce del contenuto prima di ogni elemento di un dato tipo
2
:after
p:after
Inserisce del contenuto dopo ogni elemento di un dato tipo
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).
