Siamo sempre abituati a scrivere il CSS utilizzando i 3-4 selettori standard? E’ giunta l’ora di scoprire rispolverare quei selettori che distrattamente abbiamo visto in qualche noioso geek-tutorial e farli nostri!

Vediamo allora di seguito una carrellata di selettori CSS poco conosciuti e poco utilizzati che possono risolvere situazioni particolari con poche righe di codice, evitandoci interminabili workaround! Ho volutamente riportato solamente selettori compatibili da Internet Explorer 7 in su in modo da offrire un elenco di strumenti già utilizzabili per qualsiasi progetto anche professionale. Buona lettura 😉

X + Y | Selettore adiacente

ul + p {
   color: #f90;
}

Il selettore “+” viene utilizzato per selezionare elementi adiacenti. Nel caso d’esempio verrà quindi preso colorato solamente il primo paragrafo che si trova immediatamente dopo degli ul.

Compatibilità:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X > Y | Selettore di figli diretti

div#container > ul {  
    border: 1px solid black;  
}

La differenza tra il classico selettore X Y sta nel fatto che con il selettore > posso selezionare solamente l’elemento figlio diretto. Prendiamo in considerazione il seguente markup (ed il css riportato qui sopra):

    <div id="container">  
       <ul>  
          <li> Elemento di lista 
            <ul>  
               <li>Figlio</li>  
            </ul>  
          </li>  
          <li>Elemento di lista</li>  
          <li>Elemento di lista</li>  
          <li>Elemento di lista</li>  
       </ul>  
    </div>

X ~ Y | Selettore di figli generici

ul ~ p {  
    color: red;  
}

Il selettore di figli generici è simile al selettore X + Y, tuttavia, è meno restrittivo. Se infatti il selettore ul + p permette di selezionare solamente il primo elemento immediatamente successivo ad un ul, questa regola fa sì che vengano invece selezionati tutti gli elementi p che seguono un elemento ul

Compatibilità:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[title] | Selettore per attributi

a[title] {  
   color: blue;  
}

A differenza di quanto si potrebbe pensare a prima vista, il selettore per attributi agisce sull’elemento di cui dichiariamo la proprietà e non sulla proprietà stessa. Quindi, nell’esempio qui sopra, verranno colorati solamente i links che presentano il title, mentre quelli che ne sono privi non verranno influenzati.

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[href=”foo”] | Selettore per attributi dichiarati

a[href="https://www.gleenk.com"] {  
   color: #F90;  
}

Questo selettore, altamente specifico, permette di targetizzare solamente gli elementi che presentano un attributo specifico dichiarato, nel nostro esempio ancore che puntano a www.gleenk.com. Questo selettore tuttavia è molto rigido. Basta infatti cambiare uno slash ‘/’ o aggiungere parte del percorso perchè non abbia più effetto. Per ovviare a questo si utilizza un po’ della sintassi delle espressioni regolari. Vediamo come…

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[href*=”gleenk”] | Selettore per attributi specificati ricorrenti

a[href*="gleenk"] {  
   color: #f90;
}

Ed ecco qua il selettore che ci permette di targetizzare tutti gli elementi che presentano ricorrentemente lo stesso attributo. L’asterisco indica infatti che il valore seguente dovrà apparire da qualche parte all’interno del valore dell’attributo. In questo modo in tutti i links a cui sarà presente la parola gleenk si applicherà la regola esposta.

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[href$=”.jpg”] | Selettore per estensione

a[href$=".jpg"] {  
   border:1px solid red;  
}

Utilizzando ancora un’espressione regolare tramite il simbolo $, possiamo fare riferimento alla parte finale di una stringa. Nel nostro caso possiamo andaer a targetizzare tutti quei link che puntano ad un’immagine di tipo jpeg. Se volessimo targetizzare più tipi di stringhe sarebbe sufficiente scrivere le proprietà una di seguito all’altra tipo:

a[href$=".jpg"], a[href$=".png"], a[href$=".png"] {  
   border:1px solid red;  
}

Questo ci viene comodo laddove non abbiamo grandi possibilità di intervenire direttamente sul codice sorgente, ad esempio se usiamo un CMS.
Se invece abbiamo maggiore libertà e vogliamo targetizzare contemporaneamente più tipi di estensioni possiamo utilizzare il selettore per tipi di dati specifici che troviamo qui di seguto…

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[data-filetype*=”foo”] | Selettore per tipi di dati specifici

a[data-filetype="image"] {  
   color: red;  
}

Come possiamo fare per targetizzare solo elementi che linkano ad un tipo di dato specifico?

<a href="path/to/image.jpg" data-filetype="image"> Link all'immagine </a>

Dichiarando il filetype nel link potremo via CSS realizzare il nostro intento come mostrato sopra! Solamente i link che puntano ad immagini saranno colorati di rosso! E meraviglia delle meraviglie, questo selettore è supportato fin da IE7!

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X[foo~=”bar”] | Selettore per valori di attributi specifici

a[data-info~="paperino"] {  
   color: red;  
}
<a href="path/to/image.jpg" data-info="paperino">Ciao sono paperino!</a>

Et voilà, ecco la magia delle magie! Il selettore che permette di dare informazioni personalizzate ad un elemento e targetizzarle via css! Come? Semplicemente dichiarando data-info="nomechevoglio" e andando a targetizzarlo utilizzando la sintassi CSS d’esempio!

I vostri occhi non hanno visto ancora abbastanza? Beh, se vi dicessi che è possibile inserire “n” informazioni e targetizzarle ognuna indipendetemente? Così: data-info="paperino pippo"

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

X:first-child | Pseudoselettore primo figlio

ul li:first-child {  
   border-top: none;  
}

Attraverso questo pseudoselettore possiamo targetizzare solo il primo elemento figlio di un elemento genitore. Il caso più comune d’utilizzo è quello utilizzato per distinguere il primo elemento di una voce di menù dagli altri per rimuovere il bordo superiore. Purtroppo il selettore analogo :last-child è supportato in casa microsoft solo da IE9+, di conseguenza non è stato inserito volutamente in questa lista… Così è la vita!

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

Per concludere…

Come abbiamo potuto vedere è possibile fare davvero molto con i selettori CSS meno conosciuti. Dal momento che perlomeno quelli qui sopra elencati godono del supporto pieno di tutti i browser, a partire da Internet Explorer 7 in su, ne consiglio caldamente lo studio e l’applicazione, siamo infatti sicuri che più del 90% della popolazione internauta potrà vederne i magici effetti… Perchè non sbizzarrirci?