NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 10: Classi, id, pseudo-classi e pseudo-elementi con i fogli di stile.

 

La definizione di classi o id per gli elementi, nel codice html di una pagina, permette di utilizzare al meglio, con la massima flessibilità, il "meccanismo" dei CSS.

 

Ricordo che, in html, è possibile specificare, per ogni elemento, un attributo class e/o un attributo id; la differenza tra i due sta nel fatto che un ID identifica in maniera univoca UN SOLO elemento all'interno del documento, mentre una classe può essere adottata da più elementi, anche di tipo diverso.

 

 

Dal punto di vista del CSS, possiamo considerare classi ed id come gli altri elementi html, dunque potremo impostare, per essi, proprietà e valori, facendo attenzione però alla SINTASSI dei selettori di TIPO CLASSE e di TIPO ID:

  • un selettore di tipo classe inizia con un punto;

se, ad esempio, nell'html abbiamo la classe , nel CSS il selettore ad essa associato sarà:

.miaClasse1 { /* proprietà e valori */ } ;

  • un selettore di tipo ID inizia con il simbolo # (il "canelletto");

se, ad esempio, abbiamo definito nell'html un elemento ID univoco "mioID", ci riferiremo ad esso nel CSS con il selettore:

#mioID { /* dichiarazioni per tale elemento */ } .

 

La sintassi .nomeClasse non è, comunque, l'unica disponibile: la sintassi

<tag elemento>.<nome classe>

ci permette di applicare lo stile in maniera più restrittiva, limitatamente a determinati elementi (es.: div, p, ...) che appartengono ad una determinata classe; ad esempio, definendo in html:

<DIV CLASS='miaClasse'>

<P CLASS='miaClasse'>

...

</P>

</DIV>

e scrivendo, nel CSS:

p.miaClasse { /* dichiarazioni */ }

applicheremo le dichiarazioni solo all'elemento p di classe "miaClasse", non al div (anche se la classe è la stessa).

 

Esiste una sintassi simile anche per gli ID, ad es.:

p#mioID

ma è del tutto inutile, in quanto un ID identifica di per sè UN SOLO elemento, non c'è possibilità di scelta.

 

Esistono, poi, delle classi particolari, dette PSEUDO-CLASSI, associate agli "stati" nei quali possono trovarsi certi elementi, in base al verificarsi di determinati eventi; ad esempio:

  • un link (<a>) può essere in stato "non ancora visitato", oppure...
  • ... può avere il mouse su di sè, o ancora...
  • ... può essere in stato "già visitato".

 

Le varie possibilità possono essere specificate, nel CSS, con la seguente sintassi:

<elemento, obbligatorio><[,] eventuale classe>:<pseudo-classe>

per cui avremo, ad esempio:

  • a:link { /* dichiarazioni */ }
  • a.miaClasse: hoover { /* dichiarazioni */ }
  • ...

 

Prima di concludere questo capitolo - e, con esso, l'intera guida - prendiamo in esame gli pseudo-elementi: si tratta di particolari PARTI DI ELEMENTI (la prima lettera di un blocco di testo, la prima riga, ...) il cui aspetto può essere gestito mediante i CSS; abbiamo, ad esempio:

  • :firtst-letter (es.: p:first-letter { });

Questo selettore consente di formattare secondo le proprie esigenze la prima lettera di un elemento contenente del testo.

  • :first-line (es.: p:first-line { } );

Questo selettore consente di formattare secondo le proprie esigenze la prima riga di un elemento contenente del testo.

 
Vai all'inizio della pagina