Perché dovresti conoscere i nuovi selettori CSS3

selettoricssLa nuova specifica CSS3 introduce molte novità in parecchi ambiti. Proprio per questo motivo è stata suddivisa in vari moduli, tra loro indipendenti. Il modulo selettori, che probabilmente sarà il primo a diventare una raccomandazione del W3C, è costituito da tutti i selettori della specifica CSS 2.1 presentati nei precedenti articoli, più una serie di “new entry” di cui forniremo una rapida panoramica.
Ci sono molte buone ragioni per iniziare da subito a familiarizzare con questi nuovi selettori, ma prima di elencarle, diamo uno sguardo a queste novità portate da CSS3.

Al momento i browser che supportano completamente tutti i selettori delle varie specifiche CSS sono Opera, Safari, Chrome e la versione 3.5 di Firefox. Per quanto riguarda Internet Explorer, il supporto è limitato ai selettori di attributo (nelle versioni 7 e 8), che andiamo a presentare.

Selettori di attributo

Oltre a quelli già presentati, la specifica CSS3 introduce tre nuove tipologie di selettori di attributo:

  • elemento[attributo^=”valore”] => seleziona un elemento il cui attributo inizia per “valore”
  • elemento[attributo$=”valore”] => seleziona un elemento il cui attributo termina per “valore”
  • elemento[attributo*=”valore”] => seleziona un elemento il cui attributo contiene il testo “valore”

L’utilizzo è identico ai precedenti selettori, l’unica cosa che cambia è il target del selettore.
Un semplice utilizzo pratico potrebbe essere quello di differenziare visivamente i link interni da quelli esterni. Prendiamo un estratto da una pagina web:

<p>
   Per avere più informazioni visita la nostra pagina <a href="/about">contatti</a> 
   oppure visita il <a href="https://sito.internazionale.esempio.it">sito internazionale</a>.
</p>

Potremmo voler inserire un’icona a destra di ogni link ad un sito esterno, magari per informare l’utente che si aprirà in una nuova finestra o qualcosa del genere. Sfruttando il fatto che sicuramente l’attributo href dei link esterni inizia con “https://” si potrà scrivere:

a[href^="https://"]{
   padding-right:13px;
   background:#FFF url(external.png) center right no-repeat;
}

Qui puoi vedere l’effetto finale, semplice ed efficace.
Allo stesso modo puoi inserire delle icone per differenziare i vari tipi di file, a seconda dell’estensione:

a[href$="pdf"]{
   padding-right:13px;
   background:#FFF url(icona_pdf.png) center right no-repeat;
}

a[href$="doc"]{
   padding-right:13px;
   background:#FFF url(icona_doc.png) center right no-repeat;
}

a[href$="mp3"]{
   padding-right:13px;
   background:#FFF url(icona_pdf.png) center right no-repeat;
}

Infatti abbiamo assegnato ad ogni tipo di link un’icona diversa, così l’utente potrà sapere in anticipo che tipo di file andrà a scaricare.

Selettore di un elemento fratello (elemento1 ~ elemento2 )

Il funzionamento di questo selettore è simile a quello del selettore di elemento adiacente ( + ) , solo meno restrittivo. Infatti seleziona tutti gli elementi che sono preceduti da un altro elemento specificato, entrambi figli di un unico elemento genitore. Ad esempio:

h2 ~ h3 {
   margin-left:20px;
}

Questa regola, quindi, seleziona tutti i titoli di terzo livello preceduti da un titolo di secondo livello. Nel seguente markup di esempio:

<body>
   <h2>Pagina d'esempio</h2>
   <ul>
      <h3>Una fantastica lista</h3>
      <li>Un elemento</li>
      <li>Un elemento</li>
      <li>Un elemento</li>
   </ul>
<h3>Il resto della pagina</h3>
...
</body>

solo il secondo elemento <h3> avrà il margine sinistro aumentato, poichè è preceduto da un elemento <h2> e sono entrambi figli di <body>, mentre il primo <h3> è figlio dell’elemento <ul>

Pseudo-classi :not e :target

Le pseudo classi :not(elemento) e :target sono un’altra novità dei CSS3.
La prima seleziona tutti gli elementi diversi da quello specificato. Ad esempio la seguente regola si applica a tutti gli elementi escluso i paragrafi:

*:not(p){
   color:yellow;
}

La regola viene letta come “seleziona tutti gli elementi che non sono paragrafi e rendili gialli.”
La pseudo-classe target, invece, è utile quando ci sono dei link interni alla pagina e si vuole evidenziare in qualche modo l’obiettivo del link. Ad esempio consideriamo il seguente markup:

<ul>
  <li>
    <a href="#primo">Primo</a>
  </li>
  <li>
    <a href="#secondo">Secondo</a>
  </li>
  <li>
    <a href="#terzo">Terzo</a>
  </li>
  <li>
    <a href="#quarto">Quarto</a>
  </li>
  <li>
    <a href="#quinto">Quinto</a>
  </li>
</ul>

<p id="primo">
   Questo è il primo paragrafo
</p>
<p id="secondo">
   Questo è il secondo paragrafo
</p>
<p id="terzo">
   Questo è il terzo paragrafo
</p>
<p id="quarto">
   Questo è il quarto paragrafo
</p>
<p id="quinto">
   Questo è il quinto paragrafo
</p>

Applicando il seguente CSS:

p:target{background-color:#FF3399;}

i paragrafi che sono linkati vengono evidenziati con uno sfondo rosa, come nell’esempio.

Pseudo classi strutturali I

Queste pseudo-classi sono una delle novità accolte con più clamore, poiché permettono, con il minimo sforzo, di selezionare elementi alternati ed applicargli stili diversi, senza dover aggiungere classi o ID al documento HTML. Ad esempio potresti voler alternare lo sfondo delle righe di una tabella, oppure personalizzare in modo diverso ogni commento del tuo blog. Innanzitutto scopriamo insieme quali sono:

  • :nth-child(n) => seleziona l’n-esimo figlio dell’elemento
  • :nth-last-child(n) => seleziona l’n-esimo figlio, contando dall’ultimo
  • :nth-of-type(n) => seleziona l’n-esimo elemento dello stesso tipo
  • :nth-last-of-type(n) => selezione l’n-esimo elemento dello stesso tipo, contando dall’ultimo

Pensavi di non conoscere la matematica?

Avrai sicuramente notato che tutti questi selettori accettano come argomento (n). Questo argomento può essere:

  • un numero, quindi puoi utilizzarlo per selezionare il terzo elemento con :nth-child(3), il quinto con :nth-child(5) e così via;
  • la parola ‘odd’ (dispari) oppure la parola ‘even’ (pari), per selezionare tutti gli elementi dispari o pari;
  • la formula ‘an+b’ dove a e b sono dei numeri positivi o negativi.

Quest’ultima regola è un po’ più complicata da comprendere rispetto alle altre due, ma basta fissare che:

  • a => rappresenta il numero di elementi dopo il quale si ripete la regola
  • b => rappresenta l’elemento da cui iniziare il conto per applicare la regola.

Facciamo subito qualche esempio:

li:nth-child(odd) /*applica la regole tutti gli elementi <li> dispari */
li:nth-child(6) /*applica la regola al sesto elemento <li> */
li:nth-child(4n) /*applica la regola ogni 4 elementi <li> contando dal primo */
li:nth-child(4n+2) /*applica la regola ogni 4 elementi <li> contando dal secondo*/

Il ragionamento fatto per nth-child vale anche per le altre pseudo-classi; in questo modo possiamo creare “gruppi” di elementi a cui applicare delle regole che si ripetono, senza dover inserire manualmente classi aggiuntive.
Analizziamo un’applicazioni reale di queste pseudo-classi. Immaginiamo di avere una lunga lista di commenti ad un post di un blog. Potremmo voler applicare diversi stili a gruppi di 5 commenti, magari variando il colore del testo:

....
<ol>
   <li>
      <h3>Utente:</h3>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at dolor tellus, ut 
         pellentesque est. Sed quis sapien purus. Cras in lectus vel nisi congue pellentesque 
         vel ac nisi. Sed sagittis, justo in venenatis rhoncus, massa odio commodo enim, 
         porta mollis lorem sem id tellus. Integer in odio vel felis rutrum eleifend id vest 
         tellus. Proin neque arcu, eleifend nec cursus vitae, mollis ac eros. Integer ut nibh 
         aliquam leo dignissim pellentesque et nec nunc
      </p>
   </li>
   <li>
      <h3>Utente:</h3>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at dolor tellus, ut 
         pellentesque est. Sed quis sapien purus. Cras in lectus vel nisi congue pellentesque 
         vel ac nisi. Sed sagittis, justo in venenatis rhoncus, massa odio commodo enim, 
         porta mollis lorem sem id tellus. Integer in odio vel felis rutrum eleifend id vest
         tellus. Proin neque arcu, eleifend nec cursus vitae, mollis ac eros. Integer ut nibh 
         aliquam leo dignissim pellentesque et nec nunc
      </p>
   </li>
...
</ol>
...
li:nth-child(5n){color:blue;}
li:nth-child(5n+1){color:red;}
li:nth-child(5n+2){color:yellow;}
li:nth-child(5n+3){color:green;}
li:nth-child(5n+4){color:purple;}

Con queste regole possiamo, a gruppi di 5, differenziare ogni elemento della lista, senza dover modificare in alcun modo il nostro markup. Ti invito a provare questo esempio e ad apportare tutti i miglioramenti che ritieni necessari, così da familiarizzare con questi potenti selettori.

Pseudo-classi strutturali 2

Nella specifica ci sono altre pseudo-classi strutturali, che possono essere ricavate dalle precedenti, ma dato che gli elementi a cui si applicano sono di uso comune, sono state inserite ugualmente:

  • :root => seleziona la radice del documento (in HTML è sempre l’elemento <html>)
  • :last-child => seleziona l’ultimo figlio dell’elemento contenitore (è la controparte di :first-child)
  • :first-of-type => seleziona il primo elemento di quel tipo
  • :last-of-type => seleziona l’ultimo elemento di quel tipo
  • :only-child => seleziona un elemento che è unico figlio dell’elemento contenitore
  • :only-of-type => seleziona un elemento che è l’unico figlio dell’elemento contenitore di quel tipo
  • :empty => seleziona un elemento vuoto (non deve contenere nemmeno testo)

Ad esempio, se volessi aggiungere dopo l’ultimo elemento della lista precedente il testo “The end”, potrei scrivere:

li:last-child:after{
    content:"the end";
    text-align:center;
    display:block;
    text-transform:uppercase;
}

Questa regola può essere letta come “seleziona l’ultimo elemento <li> di ogni lista e aggiungi il testo ‘the end’ subito dopo.

Pseudo-classi per form

CSS3 introduce anche delle pseudo-classi basate sull’interazione dell’utente con i form:

  • :disabled => si applica a tutti gli elementi del form che sono disabilitati attraverso l’attributo HTML ‘disabled’ e che quindi non possono essere selezionati né cliccati.
  • :enabled => si applica a tutti gli elementi del form che non sono disabilitati.
  • :checked => si applica a tutti i checkbox o bottoni radio che sono selezionati dall’utente.

Riadattando il form utilizzato per l’esempio precedente avremo:

<form action="#" method="post" id="commentform">
   <p>
      <label for="autore">Nome</label>  
      <input type="text" name="autore" id="autore" size="22" tabindex="1" />
   </p>
   <p>
      <label for="email">Email</label> 
      <input type="text" name="email" id="email" size="22" tabindex="2" disabled="disabled" />
   </p>
   <p>
      <label for="url">Sito Web</label> 
      <input type="text" name="url" id="url" size="22" tabindex="3" /></p>
   <p>
      <input type="checkbox" name="newsletter" checked="checked" />Iscrivimi alla newsletter
   </p>
   <p>
      <textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
   <p>
      <input name="submit" type="submit" id="submit" tabindex="5" value="Invia Commento"  />
   </p>
</form>

il campo di testo ‘email’ disabilitato e in aggiunta un checkbox relativo alla newsletter. Applicando il seguente CSS:

input[type=checkbox]:checked{
   border:2px solid green;
   background:#396;
  }
  input:disabled{
   background-color:#F66;
  }

avremo uno sfondo rosso per tutti gli elementi disabilitati, e tutti gli elementi ‘checked’ saranno in verde, come puoi vedere qui.

Conclusioni

In apertura di articolo avevo accennato ai motivi che ti dovrebbero spingere ad utilizzare i nuovi selettori CSS3. Se tutte le funzionalità aggiuntive non ti bastano come ragione, dovresti imparare questi strumenti per:

  • rendere più rapido il tuo lavoro: infatti non dovendo utilizzare hacks e filtri aggiuntivi (magari solo per selezionare l’ultimo <li> di una lista) il processo di sviluppo diventerà molto più rapido. Quindi potrai risparmiare tempo prezioso. E risparmiare tempo equivale a €€;
  • spingere i browser-vendor ad implementare le nuove raccomandazioni: più sviluppatori usano queste specifiche, più le case produttrici di browser dovranno aggiungerne il supporto nei loro software. Questo si traduce in meno tempo speso a testare su vari browser e piattaforme, rendendo più fluido tutto lo sviluppo. Le conclusioni sono quelle al punto precedente;
  • migliorare la manutenibilità e la flessibilità dei tuoi documenti: tramite l’utilizzo di questi selettori, l’uso di hacks verrebbe notevolemente ridotto, rendendo le modifiche ai CSS molto più semplici.

Esercizi

Per quanto riguarda gli esercizi sui selettori trattati in quest’articolo, dato che sono ancora delle bozze (e dunque potrebbero esserci delle variazioni) l’unico consiglio che mi sento di darti è quello di provare e sperimentare quanto più possibile, per comprendere più a fondo tutti gli strumenti che abbiamo a disposizione.

Gli altri articoli di questa guida:

  1. I selettori – concetti base
  2. I selettori – concetti avanzati
  3. I selettori – :before e :after
  4. I selettori – il futuro
Tag: ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

7 commenti

Trackback e pingback

  1. Perché dovresti conoscere i nuovi selettori CSS3
    [...] Perché dovresti conoscere i nuovi selettori CSS3 venerdì 26 giugno 2009 | Tratto da: https://www.yourinspirationweb.com/ [...]
  2. Conosci questi modi di utilizzo dei selettori css? (Parte 3) | Your Inspiration Web
    [...] I selettori – il futuro [...]