# CSS/Selettori

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
I CSS possono contenere diverse indicazioni sullo stile dei vari elementi della pagina, i quali devono essere identificati dai selettori. I selettori possono riferirsi a:
* elementi
* ID
* classi
Esistono oltre a questi anche particolari elementi o classi, chiamate pseudo-classi e pseudo-elementi.

## Tag

Il caso più semplice di selettore, che definisce gli attributi CSS per tutti gli elementi con un determinato nome, è quello di un semplice tag. In questo caso gli attributi verranno applicati ogni volta che quel tag è presente nel documento. Ad esempio:
Questo codice di esempio farà in modo che ogni elemento p (i paragrafi) della pagina abbia un bordo blu tratteggiato di un pixel di spessore.

## ID e classi

Un id è un selettore CSS che può essere assegnato ad un solo elemento nella pagina, identificato univocamente dall'attributo id. Una classe è un insieme di proprietà che può essere invece assegnato a uno o più elementi tramite l'attributo class. La sintassi è:
e, nel documento, sono richiamate in questo modo:
Per quanto riguarda le classi, è possibile stabilire dichiarazioni diverse a seconda essa sia attribuita ad un elemento piuttosto che ad un'altra:
imposta uno stile diverso a seconda che la classe evidenziato sia attribuita a elementi H1 e elementi P. È possibile inoltre stabilire sottoclassi, la cui sintassi è
Nell'esempio precedente avremmo potuto quindi aggiungere:
e, nel documento:

## Selettore universale

Esiste anche un selettore * che abbina qualsiasi elemento, classe o id sulla pagina.

## Raggruppare i selettori

È possibile definire più selettori per una stessa dichiarazione:
Per esempio:
Con questo codice, sia i tag h1, che gli elementi con classe rosso o ID mioID avranno il testo di colore rosso.

### Le pseudo-classi

Esistono particolari classi che identificano le proprietà di un selettore in base al proprio stato, chiamate pseudo-classi. La sintassi è
Il loro uso è legato soprattutto ai tag <a>; gli stati definibili per i link sono:
* link indica lo stato di un collegamento non ancora visitato
* visited indica lo stato di un collegamento già visitato
* hover indica lo stato di un collegamento quanto vi passa sopra il mouse. Una volta che il mouse esce dal link, viene ripreso lo stile definito da link o da visited
* active indica lo stato di un collegamento quando l'utente fa clic su di esso
Un altro stato definibile è focus, utilizzato soprattutto per i campi dei form, che identifica lo stato di un elemento che ha ottenuto il focus da parte dell'utente. Una ulteriore pseudo-classe è associata alla lingua dell'utente. Ad esempio:
È interessante la possibilità di definire uno stile dipendente da una pseudoclasse di un altro elemento. Ad esempio:
Questo codice imposta uno stile per gli elementi div con id menudiv e per i collegamenti con id menu quando il mouse vi si trova sopra.

## Gli pseudo-elementi

Gli pseudo-elementi identificano elementi specifici ma che non sono identificati da tag o attributi. La sintassi è:
I principali pseudo-elementi sono:
* first-child identifica il primo elemento figlio contenuto nell'elemento
* first-letter identifica la prima lettera del testo contenuto nell'elemento
* first-line identifica la prima riga del testo contenuto nell'elemento
* before e after usati in relazione con la proprietà content

## Altri tipi di selettori

Basandosi sulla gerarchia degli elementi nel documento è possibile definire alcuni stili particolari.
* elementi figli: è possibile definire uno stile per tutti gli elementi contenuti in un altro. La sintassi è:
    Ad esempio:
    identifica tutti gli elementi b contenuto anche non direttamente in un elemento h1
* elementi fratelli: il primo elemento allo stesso livello di un altro che abbia quindi lo stesso legame di parentela. La sintassi è
    e identifica il primo elemento1 fratello di un elemento2