CSS/Selettori: differenze tra le versioni

{{CSS}}

I CSS possono contenere diverse indicazioni sullo stile dei vari elementi della pagina, i quali devono essere identificati dai '''selettori'''. I selettori possono rifersi a:

*classi

Esistono oltre a questi anche particolari elementi o classi, chiamate pseudo-classi e pseudo-elementi.

== Elementi HTML ==

È il caso più semplice di selettore, che definisce la visualizzazione di tutti gli elementi HTML con un determinato nome. Ad esempio:

definisce lo stile per tutti gli elementi <code>p</code> (i paragrafi) della pagina.

 

== ID e CLASSI ==

Un id è un selettore CSS che può essere assegnato ad un solo elemento nella pagina, identificato univocamente dall'attributo <code>id</code>. Una classe è un insieme di proprietà che può essere invece assegnato a uno o più elementi HMTL tramite l'attributo <code>class</code>. La sintassi è:

e 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 attributa a elementi H1 e elementi P. &Egrave; possibile inoltre stabilire sottoclassi, la cui sintassi è

elemento.classe.sottoclasse { dichiarazioni }

Nell'esempio precedente avremmo potuto quindi aggiungere:

p.evidenziato.grassetto { dichiarazioni }

e, nella pagina HTML:

&lt;p class="evidenziato grassetto"&gt;...&lt;/p&gt;

=== Le pseudo-classi ===

Esistono particolari classi che identificano le proprietà di un selettore in base al proprio stato, chiamate '''pseudo-classi'''. La sintassi è

elemento:stato { dichiarazioni }

Il loro uso è legato soprattuto ai tag <code>&lt;a&gt;</code>; gli stati definibili per i link sono:

*<code>link</code> indica lo stato di un collegamento non ancora visitato