Prove Tecniche

Esistono diversi tipi di selettori utilizzabili all’interno delle dichiarazioni CSS, eccone un breve riepilogo:

Il selettore universale, scritto ” * ” seleziona il nome di ogni tipo di elemento.
Un selettore di tipo seleziona il nome di un tag (X)HTML gestendone ogni istanza all’interno del documento.

Esempio:
La seguente regola seleziona tutti gli elementi H1 nell’albero del documento:

Selettori di discendenti (nella specifica CSS erano detti selettori di contesto) servono per specificare regole di stile di un elemento quando è discendente di un altro elemento.

Esempio

Il testo racchiuso fra i tag sarà di colore rosso.

Un selettore di figlio seleziona quando un elemento è il figlio di qualche elemento (discendente diretto). Un selettore di figlio è costituito di due o più selettori separati da “>”
La seguente regola imposta lo stile di tutti gli elementi P che sono figli di BODY:

I selettori di fratelli adiacenti selezionano gli elementi che sono immediatamente vicini.
Ad esempio

riduce lo spazio verticale che separa un H1 e un H2 che lo segue immediatamente.

Il Selettore dell’attributo seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi. Il supporto di questo selettore non è diffuso.
Per aumentare la possibilità di controllo sugli elementi, è stato aggiunto all’HTML: un nuovo attributo: ‘CLASS’.
La classe viene indicata con un nome a scelta preceduto da un punto ed è applicabile a qualsiasi elemento all’interno del documento (X)HTML.

L’HTML introduce anche l’attributo ‘ID’ che deve avere un valore univoco all’interno del documento e viene indicato nel foglio di stile con il prefisso ‘#’:
Esempio:
Il seguente selettore di ID seleziona l’elemento H1 il cui attributo di ID ha il valore “capitolo1″:

Pseudo-classi e pseudo-elementi possono essere utilizzati nei selettori CSS, ma non esistono nel codice HTML.
Gli pseudo-elementi sono usati per indicare sottoparti di elementi (ad. Esempio la prima lettera o la prima riga di un paragrafo).

Lo pseudo-elemento :first-line applica stili speciali alla prima riga formattata di un paragrafo.
Esempio:

Lo pseudo-elemento :first-letter può essere usato per i “caratteri iniziali” e “capilettera iniziali.

Gli pseudo-elementi ‘:before’ e ‘:after’ possono essere usati per inserire contenuto generato prima o dopo il contenuto di un elemento.

Le pseudo-classi sono usate per impostare uno stile di un elemento al verificarsi di certe condizioni.

La pseudo-classe :first-child seleziona un elemento che è il primo figlio di un altro elemento.
Nell’esempio seguente, il selettore seleziona ogni elemento P che è il primo figlio di un elemento DIV

Le pseudo-classi possono essere dinamiche, nel senso che un elemento può acquisire o perdere una pseudo-classe mentre un utente interagisce col documento
Tramite i CSS e le pseudo-classi ‘:link’ e ‘:visited’ è possibile attribuire stili diversi ai collegamenti visitati da quelli non visitati.
La pseudo-classe :link si applica per i collegamenti che non sono ancora stati visitati.
La pseudo-classe :visited si applica una volta che il collegamento è stato visitato dall’utente.
E’ possibile inoltre attribuire stili diversi in base all’azione svolta dall’utente:
La pseudo-classe :hover si applica mentre l’utente indica un elemento ma non lo attiva. Per esempio quando il puntatore del mouse passa su un elemento.
La pseudo-classe :active si applica mentre un elemento viene attivato dall’utente. Per esempio, l’attimo che intercorre fra la pressione del bottone del mouse da parte dell’utente ed il suo rilascio.
La pseudo-classe :focus si applica mentre un elemento ha il focus (ossia accetta eventi da tastiera o altre forme di input testuale).

Per evitare che le regole di cascata dei CSS nascondano alcune proprietà è necessario che le pseudo-classi di collegamento siano scritte con il seguente ordine:

Segnala presso:

Tags: CSS, selettori