pseudo classi e elementi su CSS3

Selettori

CSS3 introduce nuovi selettori, un breve elenco dei vecchi e nuovi:

Selezionare elementi fratelli e figli

• div A – seleziona tutti gli elementi contenuti nell’elemento A;
• div > A – seleziona gli elementi contenuti direttamente nell’elemento A;
• div + A – seleziona tutti gli elementi preceduti direttamente dall’elemento A;
• div ~ A – seleziona tutti gli elementi precediti dall’elemento A;

Selezionare in base all’attributo

• attributo – seleziona gli elementi che dispongono di un dato attributo;
• attributo valore – seleziona gli elementi che hanno un determinato valore per uno specifico attributo;
• attributo =~ testo – seleziona tutti gli elementi che contengono un determinato testo nel valore di uno specifico attributo;
• attributo ^= testo – seleziona tutti gli elementi in cui il valore per uno specifico attributo comincia con un dato testo;
• attributo $= testo – seleziona tutti gli elementi in cui il valore per uno specifico attributo termina con un dato testo;
• attributo *= testo – seleziona tutti gli elementi in cui il valore per uno specifico attributo contiene un dato testo;

Pseudo classi e elementi

CSS3 introduce nuove classi e elementi un breve elenco dei vecchi e nuovi:

• :link – seleziona tutti i collegamenti non visitati;
• :visited – seleziona tutti i collegamenti visitati;
• :active – seleziona tutti i collegamenti attivi;
• :hover – seleziona tutti i collegamenti con il mouse sopra;

Selezionare gli elementi in base allo stato

• :focus – seleziona gli elementi che hanno il focus;
• :enabled – seleziona tutti glòi elementi attivi;
• :disabled – seleziona tutti gli elementi disattivi;
• :checked – seleziona tutti gli elementi selezionati;
• ::selection – seleziona la porzione di un elemento selezionata dall’utente;

Selezionare gli elementi in base alla posizione e al contenuto

• :first-letter – seleziona la prima lettera di un elemento;
• :first-line – seleziona la prima riga di un elemento;
• :first-child –  seleziona il primo elemento figlio;
• :first-of_type – seleziona il primo elemento di un dato tipo contenuto in elemento padre;
• :last-of_type – seleziona l’ultimo elemento di un dato tipo contenuto in elemento padre;
• :only-of_type – seleziona un elemento se è il solo elemento di quel tipo contenuto in elemento padre;
• :only-child – seleziona un elemento se è il solo elemento figlio di un elemento padre;
• :nth-child(n) – seleziona il secondo elemento di un dato tipo di un padre;
• :nth-last-child(n) – seleziona il secondo elemento di un dato tipo di un padre contando dal fondo;
• :nth-of-type(n) – seleziona l’ennesimo elemento di un dato tipo contenuto in un elemento padre;
• :last-child – seleziona un elemento di un dato tipo se è l’ultimo contenuto in un elemento padre;
• :root – seleziona l’elemento radice;
• :empty – seleziona ogni elemento di un dato tipo che non ha figli;

Selezionare gli elementi in base determinate regole

:not(selettore) – seleziona tutti gli elementi che non sono un certo selettore;

:before – inserisce del contenuto prima di ogni elemento di un dato tipo;

:after – inserisce del contenuto dopo ogni elemento di un dato tipo;