Approfondimento sui selettori: tipologie e loro combinazioni

Abbiamo visto che i selettori possono essere di diversi tipi: universali, associati al tag (o un suo attributo o il relativo valore) e tramite l'id o la classe, che possono essere raggruppati separandoli con virgole nel caso le regole applicate siano le stesse ed è stato accennato che essi possono interagire tra loro combinandosi al fine di assegnare delle particolari regole a determinati gruppi di elementi e volendo anche solo in determinate condizioni.
Anche un apparente innocuo spazio può fare la differenza ed i due esempi di codice che seguono ne sono una valida testimonianza:

<style type="text/css">
  p .rosso {color:#AA0000;}
</style>
<div>
  <p>Primo paragrafo</p>
  <p class="rosso">Secondo paragrafo</p>
  <p><span class="rosso">Terzo paragrafo</span></p>
  <p class="rosso"><span class="rosso">Quarto paragrafo</span></p>
</div>

<style type="text/css">
  p.rosso {color:#AA0000;}
</style>
<div>
  <p>Primo paragrafo</p>
  <p class="rosso">Secondo paragrafo</p>
  <p><span class="rosso">Terzo paragrafo</span></p>
  <p class="rosso"><span class="rosso">Quarto paragrafo</span></p>
</div>

Le due porzioni di codice di cui sopra, apparentemente identiche, differiscono per uno spazio nel selettore della dichiarazione tra il tipo di tag p e la classe .rosso; la presenza di tale spazio fa sì che nel primo caso il testo contenuto nel secondo paragrafo non sarà colorato di rosso mentre lo sarà il testo del terzo paragrafo, di contro la situazione opposta si avrà nel secondo caso. Il primo ed il quarto paragrafo, utilizzati come "controllo" e rispettivamente di colore nero e rosso, rimarranno invece invariati in entrambi i casi.

La spiegazione di questo comportamento è che lo spazio indica una sorta di discendenza pertanto nel primo caso si applica la regola della classe agli elementi che dispongono di tale classe ma che sono all'interno di un elemento di tipo paragrafo, nel secondo invece si applica a tutti gli elementi di tipo paragrafo che dispongono di quella classe.
Un selettore simile a quello per discendenza è quello che indica il primo livello diretto di figli del primo elemento e si indica col simbolo maggiore ">":

<style type="text/css">
  div#grassetto > p {font-weight:bold;}
</style>
<div id="grassetto">
  <p>Questo sarà in grassetto</p>
  <div>
    <p>Questo NON sarà in grassetto</p>
    <div>
      <p>Questo NON sarà in grassetto</p>
    </div>
    <p>Questo NON sarà in grassetto</p>
  </div>
  <p>Questo sarà in grassetto</p>
  <p>Questo sarà in grassetto</p>
</div>

Il grassetto, come già indicato all'interno del codice di esempio, sarà applicato solo ai paragrafi che sono figli diretti del contenitore con id="grassetto".

Con la stessa struttura sintattica esistono altre combinazioni di selettori che usano altri simboli tra cui il simbolo "+" con il quale si identificano i fratelli adiacenti all'elemento indicato (div#grassetto + p) ed il tilde "~" per indicare tutti i fratelli e successori del tipo indicato (div#grassetto ~ p).

Un elemento nel DOM può essere identificato anche tramite un suo attributo o il relativo valore:

<style type="text/css">
  input[type=button]{border:solid 1px #00AA00}
  input[type=button][disabled] {border:solid 1px #AA0000}
</style>
<div>
  <input type="button" value="Bottone" />
  <input type="button" value="Bottone" disabled="disabled" />
  <input type="submit" value="Bottone" disabled="disabled" />
</div>

Nell'esempio in questione identifico gli elementi di tipo input con attributo type="button" al fine di modificarne il bordo assegnandogli un colore e specificando inoltre che tali elementi se dispongono anche di un attributo di tipo disabled avranno il bordo di un colore diverso. Nessun effetto è applicato al terzo elemento di input in quanto nonostante disponga dell'attributo disabled, il valore dell'attributo type non è button ma submit.
Le specifiche del CSS3 offrono altri tipi di selettori di attributo che sono trattati nell'apposita guida di riferimento.