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;

Please follow and like us:

Lascia un commento