Categorie
Css Programmazione

Selettori CSS3

I selettori sono i pattern usati per selezionare gli elementi a cui applicare uno stile CSS (CSS3).

I piu’ usati e conosciuti sono “.nomeClasse“, “#nomeID”, e i tag HTML (body, div, p, img, a, etc.) CSS3 ha portato a nuovi identificatori.

Selezionare elementi fratelli e figli

Selettore Esempio Descrizione Livello CSS
elemento A > elemento B div > p seleziona gli elementi B contenuti direttamente in un elemento A 2
elemento A elemento B div p seleziona gli elementi B contenuti in un elemento A 1
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

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 element 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 elementopadre 3
:only-of-type p:only-of-type Seleziona un elemento se è il solo elemento di quel tipo contenuto inelemento 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 2

cit. MrWebmaster

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.