CSS – Cascading Style Sheet: Caratteristiche nominali, posizionali e contestuali

Una delle possibilità dei CSS¹ è quella di definire (o ridefinire) le caratteristiche degli elementi, in modi diversi. Tre di questi, ovvero la definizione nominale, quella posizionale e quella contestuale, sono quelle di cui parliamo in questa pagina. La prima, quella nominale, è il modo con cui “un elemento che si chiama in un certo modo assume determinate caratteristiche”. La seconda, è quella per cui “un elemento assume determinate caratteristiche per il fatto di trovarsi in una certa posizione all’interno del codice della pagina”. La terza è quella caratteristica che si manifesta per gli “elementi che si vengano a trovare in determinate circostanze”. Vediamo come…

Indice

1. Selettori, dichiarazioni e regole (Contextual Selectors)

Selettori, dichiarazioni e regole (Contextual Selectors)

Come scrivere un CSS

Un CSS si compone di regole, quindi il linguaggio usato per i CSS è di tipo normativo ovvero detta il comportamento degli elementi della pagina di Markup, che può essere scritta in HTML, XHTML, ecc.
Una regola è la minima parte di cui si compone un CSS; un CSS ne può contenere un numero qualunque, anche nessuna; una regola appare in questo modo:

p
{
display: inline;
}

la regola è composta da un selettore (nell’esempio “p“), da una coppia di parentesi graffe (“{” e “}“) e da una o più dichiarazioni (nell’esempio: “display: inline;“).
Una dichiarazione è composta a sua volta da una proprietà (lo scritto a sinistra dei due punti, quindi nell’esempio “display“) e da un valore (lo scritto alla destra dei due punti, nell’esempio “inline“); sarà chiaro a questo punto che proprietà e valore devono essere divisi dal carattere due punti (“:“) e che la dichiarazione deve essere terminata da un punto e virgola (“;“).
E’ tutto.

Selettori

Selettore	Significato
*	selettore universale, ovvero tutti gli elementi (non a caso il carattere viene anche letto “all”)
h1 {...}	selettore di tipo: tutte le occorrenze dell’elemento h1
h1, h2 {...}	selettore di tipo: tutte le occorrenze degli elementi h1 e h2 (notate la virgola)
p em {...}	selettore di tipo (posizionale): tutte le occorrenze dell’elemento em dentro un elemento p
.special {...}	selettore di classe: tutti gli elementi aventi classe special
.special.extra {...}	selettore di classe: tutti gli elementi aventi classe special e classe extra
h1.special {...}	selettore di classe: tutte le occorrenze dell’elemento h1 aventi classe special
h1.special.extra {...}	selettore di classe: tutte le occorrenze dell’elemento h1 aventi classe special e classe extra
elemento#questo {...}	l’elemento elemento avente id “questo”
td[rowspan] {...}	tutti gli elementi td aventi l’attributo rowspan assegnato
td[rowspan="2"]	tutti gli elementi td aventi l’attributo rowspan assegnato a 2
h1 > em {...}	occorrenze di un elemento em in un h1 come figlio

Uso delle regole nel linguaggio di Markup (HTML, XHTML, ecc.)

* il selettore universale non deve essere (per definizione) usato esplicitamente perché si applica a tutti gli elementi.
Un selettore di tipo viene usato nel documento di Markup in maniera naturale, poiché riguarda un TAG del linguaggio, ad esempio <h1>, <h2>, <p>, <li>, ecc.
Un selettore di tipo posizionale viene usato nel documento di Markup in maniera naturale, avendo cura di annidare gli elementi in modo che la loro posizione reciproca ricada nella regola CSS, ad esempio: p em {...} verrà utilizzata dal codice XHTML

(...)
<p>Lorem ipsum <em>dolor</em> sit amet</p>
(...)

ma NON dal codice

(...)
<p>Lorem ipsum</p> <em>dolor</em><p> sit amet</p>
(...)

perché l’elemento em NON si trova all’interno di un elemento p

Prettamente contestuali

a:link
a:hover
a:active
a:visited
a:focus

Prettamente posizionali

elemento:first-child

Pseudoelementi

elemento:before
elemento:after
elemento:active
elemento:visited
elemento:focus
elemento:first-line

* * *

1. W3C – Recommendation – CSS2 5. Selectors