📁
Forum per Webmaster
CSS > Selettori

Id e cassi

Utilizzo dei prefissi punto “.” e cancelletto “#” posti ad indicare i selettori “id” e “classi” nel css

Id e cassi sono due attributi del codice xhtml, di primaria importanza per i fogli di stile.
Permettono l’associazione d’ un’insieme di regole ad un gruppo (class) o ad un solo selettore (id).
Ipotizziamo che si voglia assegnare a tutti i commenti di un blog un determinato colore ed una grandezza predefinita di 10px. Senza l’ausilio di questi due particolari selettori non sarebbe possibile utilizzando i css, saremmo costretti ad utilizzare il vetusto tag font.
Tramite i CSS ci sarà sufficiente assegnare una classe ai commenti, nominandola ad esempio "commenti" e dichiarare tali proprietà nel css in nella maniera seguente:

Codice html:

<p class="commenti">Primo commento</p>
<p class="commenti">Secondo commento</p>

Foglio di style:

.commenti {color:red: font-size:10px;}

Notate nel foglio di stile il punto (.) prima del nome della classe “commenti”: Serve ad indicare che le regole inserite sono riferite a tutti gli elementi con quella determinata classe esplicita.
La classe così definita si applicherà a qualsiasi elemento inserito nella pagina avente l’attributo class"commenti".

Scrivendo quindi questo codice xHTML

<p class"commenti">Commento</p> Bla bla <div class"commenti">Blocco di testo</div>

Anche il contenuto del tag div sarà visualizzato con le medesime proprietà stabilite per i commenti.
Se si volesse invece restringere la regola esclusivamente ai tag p, basterebbe specificare il css in questo modo:

p.commenti {proprietà:valori}

Affinché le regole della classe commenti siano applicate esclusivamente ai paragrafi (p).

Una sorta di classe speciale è l’id, che si diversifica rispetto alla classe per il fatto che è applicabile esclusivamente ad un singolo elemento (tag) con l’id univoco. In pratica può essere applicato univocamente ad un solo elemento tramite la definizione nel xHTML:

<p id="id-numero1">Testo</p>

e nel css:

#id-numero1 {proprietà:valore;}

Le norme sono le stesse che per le classi, con la differenza d’anteporre il cancelletto (#) al posto del punto, questo perché nel foglio di stile il selettore dell’id si identifica dal prefisso #.

Argomenti nella stessa categoria