MICHELEPISANI.IT

Guida di base ai CSS ver. 1 e 2

Selettori universali, associati al tag, tramite l'id o la classe

Approfondimento sui selettori: tipologie e loro combinazioni

Agosto 02
07:022014

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.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao stefy,
la tua domanda non è proprio pertinente a questo articolo... ti consiglio di dare …

stefy

salve. ho un problema sulla pagina facebook..non riesco a unirla..mi dice che è in sospeso …

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?