Siamo arrivati al punto di dover applicare delle regole alle nostre pagine. Come si fa a dire attraverso i css che il nostro paragrafo deve contenere testo di colore rosso? Come facciamo a dire di applicare uno sfondo giallo ed un margine nullo a tutti i titoli h1? Come diciamo al css che tutti i titoli h1 ed h2 devono avere padding nullo?

p { color: red;} nel primo caso,
h1 { background-color: yellow; margin: 0; } nel secondo e
h1, h2 { padding: 0; }  nell’ultimo. Tutto qua!

Vediamo nel dettaglio la prima regola:

  p   { color: red; }

selettore              proprietà           valore

Come avrete notato la regola è divisa in due parti: la prima è il selettore, cioè la parte che indica a quale sezione del documento applicare la regola (o le regole) indicata dal blocco delle dichiarazioni racchiuso tra parentesi graffe.

Il blocco delle dichiarazioni è un insieme di dichiarazioni formato da una proprietà e da un valore da assegnare alla stessa, divisi tra loro da due punti e terminato da un punto e virgola. Regole successive possono evidentemente applicate come nel caso del titolo h1 del secondo esempio.

E’ possibile associare le stesse regole a più selettori come indicato nel terzo esempio ed applicare regole diverse a seconda della disposizione degli elementi nella pagina, argomento che potrete approfondire nella pagina I selettori.

Un caso particolare di regola è riferita a tutte quelle proprietà, quali ad esempio margin, padding, border, che potrebbero avere valori diversi nei quattro lati.
E’ possibile quindi associare valori variabili ai bordi destro, sinistro, superiore ed inferiore con questa sintassi:

p {
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-left: 5px;
}

La cosa interessante è che in tali situazioni è possibile applicare una regola comune e *risparmiare* codice con la c.d. sintassi abbreviata in tal modo:

p {
    margin: 0 2px 3px 5px;
}

con i valori per, rispettivamente, il lato alto, destro, basso e sinistro (in senso orario partendo dall’alto per capirci  )

E’ possibile associare una regola solo per i lati alto e basso ed una per destro e sinistro:

p {
    margin: 5px 0;
}

con il primo valore riferito ai lati orizzontali ed il secondo per quelli verticali.

Se si indicano infine solo tre valori,

p {
    margin: 3px 10px 2px;
}

essi saranno riferiti rispettivamente al lato superiore, al lato destro e sinistro ed al lato inferiore; in pratica è equivalente a scrivere: p {margin: 3px 10px 2px 10px;}.

Abbiamo già visto nell’articolo dedicato alle regole dei css cosa siano i selettori: un oggetto a cui è possibile associare valori e proprietà.

Esistono vari tipi di selettori:

• Selettore Universale (Universal Selector)
• Selettore di Elementi (Type Selectors)
• Selettori Discendenti (Descendant Selectors)
• Selettore Figlio (Child Selectors)
• Pseudo-classe :first-child (The :first-child pseudo-class)
• Pseudo-classi dei links (The link pseudo-class)
• Selettori Adiacenti (Adjacent Selectors)
• Selettori di Attributi (Attribute Selectors)
• Selettori di Classi (Class Selectors)
• Selettori di ID (ID Selectors)
• Pseudo-classi :first-line e :first:letter (The :first-line e :first:letter pseudo-class)

Selettore Universale *

Permette di associare a tutti gli elementi della pagina delle regole.
Es:

* {color:black; margin:0; }

Associa a qualsiasi elemento della pagina il colore nero e margine nullo.

Selettore di Elementi

E’ il più diffuso. Permette di associare regole ad uno o più elementi:

h1 { font-style: Georgia, serif; }
h2 { font-style: Georgia, serif; }
h3 { font-style: Georgia, serif; }
h4 { font-style: Georgia, serif; }
h5 { font-style: Georgia, serif; }
h6 { font-style: Georgia, serif; }

C’è la possibilità di associare l’insieme di regole a più elementi separandoli con una virgola:

h1, h2, h3, h4, h5, h6 { font-style: Georgia, serif; }

scrittura equivalente alla precedente.

Selettori Discendenti

Questa opzione ci permette di associare regole a particolari elementi se e solo se contenuti in altri elementi definiti:

div strong { color: red; }

Associa il colore rosso solo agli elementi strong contenuti in div.

<body>
 <strong>Questo non sarà rosso in quanto non contenuto in un un div</strong>
 <div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
 <div>Anche <p><strong>questo testo</strong></p> sarà mostrato in rosso; non è importante che i due elementi siano adiacenti o figli.</div>
</body>

Selettore Figlio

Potrebbe essere una buona soluzione a molti problemi, purtroppo non è supportato, così come il selettore adiacente, da Internet Explorer. Secondo le specifiche permette di associare regole ad elementi solo se contenuti da un altro indicato nel selettore e da nessun altro. 

div > strong { color: red; }

Es:

<body>
  <div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
 <div>Anche <p><strong>questo testo</strong></p> NON sarà mostrato in rosso in quanto tra div e strong c’è un altro elemento, mentre <strong>questo testo</strong> vicecersa lo sarà.</div>
</body>

Pseudo-classe :first-child

Molto simile al selettore figlio, solo che tale regola vale SOLO per il primo figlio, indipendentemente dalla distanza cui è posto dall’altro.
Es:

div > strong:first-child { color: red; }

Pseudo-classi dei links

E’ probabilmente una delle feature più interessanti dei Css: permette di associare ai links (ed anche agli altri elementi, tranne :link e :visited, in teoria; in pratica visto il non supporto di IE solo all’elemento A) regole diverse a seconda se il link non è stato visitato (:link), già seguito (:visited), attivo (:active), al passaggio del mouse (:hover) e se selezionato (:focus).
Es:

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: black; }
a:hover { color: red; }
a:focus { color: green; }

Selettori Adiacenti

Ha la stessa limitazione dei selettori figli: non è supportato da Internet Explorer. Secondo le specifiche permette di associare regole ad elemento solo se contenuto subito dopo l’altro indicato. 

div + strong { color: red; }

Es:

<div>
  <strong>Questo testo sarà mostrato in rosso</strong> mentre
 </div>

<div>
  il prossimo <strong>testo</strong></p> no, in quanto non immediatamente vicino all’elemento div
</div>

Selettori di Attributi

Selettore davvero interessante per i possibili sviluppi verso l’XML ma purtroppo di poca utilità visto che pochissimi browser attualmente non lo supportano. Permette di associare regole diverse all’elemento se dotato di attributi o valori degli stessi.

H1[title] { color: red; }
H1[title="pippo"] { color: green; }

La prima regola associa il colore rosso a tutti gli elementi h1 dotati di title, mentre la seconda regola varrà solo per gli elementi h1 il cui titolo è esattamente pippo. Potrebbe essere molto utile per assegnare valori diversi agli elementi input di un form, per variare lo stile del pulsante submit rispetto ad un campo testo ad esempio; purtroppo ad oggi è conveniente per la stessa operazione assegnare delle classi diverse ai tag.

Selettori di Classi

Permette di assegnare regole a qualunque elemento a cui abbiamo assegnato una classe:

*.nomeclasse { color: red;} o, in forma equivalente
.nomeclasse { color: red;}

E’ possibile ovviamente assegnare regole solo ad uno o più elementi con classe nomeclasse, usando la sintassi:

strong.nomeclasse  {color: purple; }

Selettori di ID

Selettore molto simile al precedente con l’ovvia differenza che le regole saranno assegnate solo ad un particolare ID:

#nomeclasse  {color: purple; }

Pseudo-classi :first-line e :first:letter

Opzione molto interessante che limita le regole rispettivamente alla prima linea del testo nel primo caso ed alla prima lettera nel secondo per effetti simili a quelli tipografici. Es:

p:first-line { text-transform: uppercase; }
p:first-letter { font-size: 300%; color:red; }

trasforma la prima riga dei paragrafi (p) in maiuscoalo e rende la prima lettera degli stessi 3 volte più grande e di colore rosso.