SELETTORI

  • I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile.

E L E M E N T O

  • Inserendo un selettore senza prefisso si identifica un elemento HTML.

  • Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore

C L A S S E

  • Un selettore preceduto da un punto identifica una classe.

  • Una classe è un nome che identifica un gruppo di regole di stile.

  • Gli elementi della pagina che contengono quel nome nell’attributo class seguono le regole di stile che la classe identifica

P S E U D O C L A S S I

  • Quando si fa seguire un selettore da i due punti si identifica un determinato stato degli elementi identificati da quel selettore chiamato pseudo-classe.

  • Usando le pseudoclassi posso attribuire un particolare aspetto ad un elemente quando si trova in un deteminata stato. Esempi:

    • :hover indica lo stato di un elemento quando il puntatore del mouse passa sopra all’elemeto stesso

    • :focus indica lo stato di un elemente quando ha il «il focus»

    • :nth-child(n) indica un elemento quando è l’ennesimo figlio del suo «parent».

SELETTORI COMPOSTI

UNIONE DI SELETTORI

  • Quando viene seguito senza separatori da un selettore di classe, di id, di attributo o di pseudoclasse, vengono selezionati solo gli elementi che soddisfano ad entrambi i criteri. Esempi:

    • nav.indice: gli elementi nav il cui attributo class contiene indice

    • div#main: la div con id uguale a main

    • input[type=‘text‘]: tutti gli elementi input con l’attributo type uguale a text

SELEZIONARE UN ELEMENTO CONTENUTO IN UN ALTRO ELEMENTO

nav.indice ol li a {
    color: #000;
}
  • Seleziona tutti gli elementi a che sono dentro un elemento li che a suo volta è dentro un elemento ol che è dentro un elemento nav con classe ‘indice’.

PSEUDO CLASSI

  • Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni.

  • A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore.

a:link {color: blue;}

  • La regola vuol dire: i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue.

S E L E T T O R I

COLORI PREDEFINITI

COLORPICKER

B A C K G R O U N D

background-color

  • Definisce il colore di sfondo di un elemento.

selettore {background-color: #FFF;}
selettore {background-color: transparent;}

background-image

  • Definisce l'URL di un'immagine da usare come sfondo di un elemento.

selettore { background-image: url(valore); }
selettore { background-image: none}

background-repeat

  • Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. selettore

{background-repeat: valore;}

  • Valori: repeat, repeat-x, repeat-y, no-repeat

background-attachment

selettore {background-attachment: valore;}

  • Valori: scroll, fixed.

background-position

  • Definisce il punto in cui verrà piazzata un'immagine di sfondo.

selettore {background-position: valoreOriz | valoreVert;}

  • Valori: valori in percentuale, valori espressi con unità di misura, parole chiave top, left, bottom, right, center.

background

  • Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.

selettore { 
    background: background-color background-image background-repeat background-attachment background-position;
}

background-clip

  • Definisce l'areA dello sfondo.
selettore {background-clip: border-box|padding-box|content-box|initial|inherit;}

background-origin

  • A cosa è relativa la posizione dell'immagine.

selettore {background-origin: border-box|padding-box|content-box|initial|inherit;}

background-size

  • Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta.

selettore {background-size: auto|larghezza altezza|cover|contain|initial|inherit;}