Differenti tipi di selettori Wap CSS

Fino ad ora è stato usato un solo tipo di selettore nei fogli di stile CSS ma sono disponibili altri tipi che possono tornare utili.

Selettore tipo

Negli esempi WAP CSS visti in precedenza sono stati utilizzati elementi XHTML MP nominati come "selettore". Da notare che i nomi degli elementi sono case-sensitive, in XHTML MP, e devono essere scritti in minuscolo alla stessa maniera, nel foglio di stile WAP CSS, gli stessi elementi devo essere scritti anch'essi in minuscolo. Ad esempio, il seguente codice WCSS non è corretto perché il selettore di tipo "H1" non è in minuscolo.

la versione corretta è la seguente:

Selettore di classe

Un selettore di classe è usato in combinazione con la classe dell'attributo del tag XHTML MP. La classe dell'attributo trova corrispondenza in tutti i tag XHTML MP ai quali gli stili CSS sono applicati. Un selettore di classe inizia con il carattere "." (punto) ed è seguito dal nome della classe stessa. Ecco un esempio:

Entrando nello specifico, vediamo un esempio di codice reale:

la regola di stile color:#f60; verrà applicata a tutti i tag XHTML MP ai quali verrà associata la classe .orange. Vediamo un esempio pratico, richiamando la pagina con il selettore.

Al tag h1 ed al paragrafo è stata associata la classe ".orange", per cui sia il titolo che il testo della pagina hanno assunto il colore arancio.

Se viene specificato il nome di un tag XHTML MP prima del "." (punto), seguito dal nome della classe, la formattazione verrà applicata a tutti i tag interessati nel documento. Per esempio:

In questo caso, tutti i tag h1 che avranno la classe .orange, prenderanno il colore arancio. Se associassimo la stessa classe .orange ai paragrafi della pagina, non vedremmo il testo di colore arancio; il perchè è facilmente intuibile. Vediamo un esempio su quanto appena scritto, richiamando la pagina

Selettore id

Il selettore ID è usato in combinazione con l'attributo id di un elemento XHTML MP. L'utilizzo del selettore ID è simile a quello del selettore di classe. Per prima cosa si devono scrivere le dichiarazioni, associate ad un determinato elemento con id specifico, all'interno del foglio di stile WCSS. Poi si specifica l'ID per l'attributo di un elemento XHTML MP al quale si vorrebbe applicare gli stili CSS.

Un selettore id comincia sempre con il simbolo "#" (sharp); di seguito un esempio:

Il colore #f60 verrà applicato all'elemento che nel documento XHTML MP avrà lo stesso #id-elemento. Un selettore id può essere utilizzato una ed una sola volta in un documento XHTML MP, dal momento che due elementi non possono avere lo stesso attributo id. Se si devono applicare le stesse caratteristiche a più tag, converrebbe usare i selettori di classe.

Supponiamo di voler visualizzare un determinato colore per il titolo di una pagina web; a tale tag h1 associamo un id titolo. Il codice è il seguente:

In questo caso tutto andrà bene in quanto si è identificato un solo elemento con un unico attributo id. Se nella stessa pagina associamo lo stesso id ad un altro tag, per esempio il paragrafo, non aspettiamoci che anche il testo del paragrafo sarà di colore arancio. Si richiami la seguente pagina xhtml di esempio.

Solo il titolo, come dichiarato nel css, avrà il colore designato e non anche il testo della pagina. Tra l'altro, oltre al fatto che in un documento ci deve essere un solo elemento con attributo id, riceveremmo un messaggio di errore se validassimo le pagine. Il messaggio che apparirebbe sarebbe il seguente: ID "titolo" already defined.

Selettore universale

Il selettore universale, rapresentato dal simbolo "*" (asterisco), seleziona tutti i tag in un documento XHTML MP. Se scrivessimo una dichiarazione come quella dell'esempio seguente, avremmo tutti i tag di colore rosso.

Si veda quanto appena scritto in una pagina xhtml di esempio