Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

CSS: selettori speciali

Gli attributi CLASS e ID

Dall’HTML 4 sono stati introdotti due importanti attributi applicabili a qualsivoglia elemento html. Gli attributi sono: class e id.
ID assume un valore arbitrario, scelto dallo sviluppatore, purché esso sia univoco in tutto il documento. In altre parole l’id è un valore, alfanumerico, che permette di identificare un elemento all’interno del codice html. Un esempio è:

<p id='paragrafo'>
...
</p>

CLASS può assumere un valore stringa qualunque e differisce dall’id perché più elementi possono condividere lo stesso valore.
E’ quindi permesso definire:

<p class='blocco'> ... </p>
<div class='blocco'> ... </div>

Applicare questi attributi ai tag di una pagina html non muta il loro aspetto, ma ci permette innanzitutto di identificare gli elementi, classificarli e distinguerli tra loro.
In questo modo class e id diventano una delle chiavi principali per sfruttare al meglio le potenzialità dei fogli di stile.
Sarà possibile applicare una definizione di stile ad un singolo elemento grazie all’id, oppure a più elementi di tipo diverso grazie all’attributo class.
Negli esempi visti nella lezione precedente, non eravamo sufficientemente in grado di applicare uno stile solo ad un determinato elemento, bensì eravamo in grado di applicare un regola CSS a tutti gli elementi di uno stesso tipo o al massimo in relazione alla loro gerarchia (elemento discendente o figlio).

Selettore classe

Per identificare una classe si usa far precedere il nome da un semplice punto (.):

. nome_della_classe

Questa è la sintassi base.
Un selettore classe così definito può essere applicato a tutti gli elementi di un documento HTML. Vediamo quindi un esempio concreto del selettore classe:

.testo_rosso {
	color : red;
}
.testo_verde {
	color : green;
}

Analizziamo ora la seguente porzione di codice html, nel quale verranno definiti alcuni elementi che utilizzano le classi definite sopra:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div class='testo_rosso'>Questo div appartiene alla classe testo_rosso.</div>
<div class='testo_verde'>Questo div appartiene alla classe testo_verde.</div>
<span class='testo_verde'>Anche questo span appartiene alla classe testo_verde!</span>

Il risultato finale è il seguente:

Selettore classe

Nell’esempio, la classe testo_verde è stata applicata ad elementi di natura diversa come un div e uno span. Questo modo di operare ci fornisce un grado di personalizzazione e flessibilità molto alto al cospetto dei semplici selettori di elementi.

Esiste un secondo tipo di sintassi per il selettore di classe:

elemento.nome_della_classe

E’ una regola più restrittiva rispetto alla sintassi generica. Se infatti definiamo le seguenti regole CSS:

p.testo_rosso {
	color : red;
}
div.testo_verde {
	color : green;
}

Lo stile verrà applicato esclusivamente ai paragrafi che presentino attributo class=‘testo_rosso’ e ai div con class=‘testo_verde’.
In pratica se definiamo all’interno del codice html un paragrafo con classe ‘testo_verde’ questo non acquisirà lo stile definito nel CSS perché ‘testo_verde’ è riferito esclusivamente ad elementi div.

Questo secondo tipo di sintassi va usata solo se si pensa di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece si ritiene di doverla applicare a tipi diversi è necessaria la sintassi generica.

Selettore ID

La sintassi di un selettore ID risulta essere ancor più semplice di quella del selettore classe.

#nome_id

In questo caso è necessaria esclusivamente questa sintassi essendo per natura l’ID univoco all’interno del codice html,  specificare l’elemento al quale è associato l’id sarebbe superfluo.

Vediamo un esempio pratico, riprendendo il codice descritto per il selettore classe:

#testo_rosso {
	color : red;
}
#testo_verde {
	color : green;
}

Riscriviamo la porzione di codice html, utilizzando al posto dell’attributo class l’attributo id:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div id='testo_rosso'>Questo div ha come ID testo_rosso.</div>
<div id='testo_verde'>Questo div ha come ID testo_verde.</div>

Il primo div non ha un id settato, mentre il secondo e il terzo hanno come id rispettivamente ‘testo_rosso’ e ‘testo_verde’. Il risultato nella finestra del browser è il seguente:

Selettore ID

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×