Advertisement
  1. Code
  2. Web Development

I 30 Selettori CSS che dovete memorizzare

by
Read Time:15 minsLanguages:
This post is part of a series called CSS3 Mastery.
10 CSS3 Properties You Need to Be Familiar With
Getting to Work with CSS3 Power Tools

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Così avete imparato i selettori base id, class e descendant - quindi la giornata di lavoro è finita? Se così, vi state perdendo un'enorme quantità di flessibilità. Sebbene molti selettori menzionati in questo articolo sono parte delle specifiche CSS3, e sono, di conseguenza, disponibili solo nei browsers moderni, dovete a voi stessi il fatto di memorizzarli.

1. *

Cominciamo dai selettori più conosciuti, per i principianti, prima di proseguire verso quelli più avanzati.

Il simbolo a stella selezionerà ogni singolo elemento della pagina. Molti sviluppatori useranno questo trucchetto per portare a zero margini e padding. Nonostante sia certamente efficace per tests rapidi, vi consigliamo di non usare mai questo sistema in produzione. Aggiunge troppo peso sul browser, e non è necessario.

* può essere usato con i selettori figlio.

Nell'esempio riportato in alto verrà selezionato ogni singolo elemento che è figlio di #container div. Di nuovo, cercate di non usare questa tecnica per molto, se non mai.

Demo

Compatibilità

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

Inserire come prefisso il simbolo hash a un selettore ci consente di selezionare per id. Questo è probabilmente l'uso più comune, ma siate comunque cauti quando usate selettori id.

Chiedetevi: ho assolutamente bisogno di applicare un id a questo elemento per selezionarlo?

I selettori id sono rigidi e non consentono un riutilizzo. Se possibile, cercate prima di usare un tag, uno dei nuovi elementi HTML5 oppure una pseudo-classe.

Demo

Compatibilità

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

Questo è un selettore class. La differenza tra ids e classi consiste nel fatto che con le ultime potete selezionare elementi multipli. Usate classi quando volete che il vostro stile venga applicato a un gruppo di elementi. Alternativamente, usate ids per cercare un ago-in-un-pagliaio e dare stile solo a quello specifico elemento.

Demo

Compatibilità

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

Il prossimo selettore più comune è il selettore descendant. Quando avete bisogno di essere più specifici con i selettori, usate questi. Per esempio, se al posto di selezionare tutti gli anchor tags, aveste bisogno di selezionare soltanto quelli all'interno di una lista non ordinata? Questo è esattamente il caso in cui usare i selettori a discesa.

Pro-tip - Se il vostro selettore assomiglia a X Y Z A B.error, state probabilmente sbagliando. Chiedetevi sempre se è assolutamente necessario aggiungere tutto quel peso.

Demo

Compatibilità

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

Se volete selezionare invece tutti gli elementi di una pagina secondo il loro type piuttosto che secondo l'id o la class? Mantenete le cose facili e usate un selettore type. Se avete bisogno di selezionare tutte le liste non ordinate usate ul {}.

Demo

Compatibilità

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited e X:link

Usiamo la pseudo-classe :link per selezionare tutti gli anchor tags che devono ancora essere cliccati.

Alternativamente, abbiamo a disposizione anche la pseudo classe :visited che, come vi aspettereste, ci consente di applicare uno stile specifico ai soli anchor tags sulla pagina che sono stati cliccati, o visitati.

Demo

Compatibilità

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

Questo è definito un selettore adiacente. Selezionerà solo l'elemento che è immediatamente preceduto dal primo elemento. In questo caso, solo il primo paragrafo dopo ogni ul avrà il testo rosso.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

La differenza tra lo standard X Y e X > Y consiste nel fatto che il secondo selezionerà soltanto elementi figlio diretti. Per esempio, considerate il seguente markup.

Un selettore #container > ul selezionerà soltanto le ul che sono figlie dirette del div con id container. Non selezionerà, per esempio, l'ul che è figlia del primo li.

Per tale ragione, ci sono benefici in performance nell'usare questo combinatore. Infatti, è raccomandato particolarmente quando si lavora con motori di selezione CSS basati su JavaScript.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

Questo combinatore è simile a X + Y, anche se meno diretto. Mentre un selettore adiacente (ul + p) selezionerà soltanto il primo elemento immediatamente preceduto dal selettore iniziale, questo selettore è più generalizzato. Selezionerà, in riferimento all'esempio soprastante, qualsiasi elemento p, purché segua un ul.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

Indicato come un selettore di attributi, nell'esempio soprastante, selezionerà solo gli anchor tags che hanno un attributo title. Gli anchor tags che non hanno attributo non riceveranno questo stile particolare. Ma se avete bisogno di essere più precisi? Bene...

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

Lo snippet in alto darà lo stile a tutti gli anchor tags con link verso https://net.tutsplus.com; questi riceveranno il nostro colore verde marcato. Tutti gli altri anchor tags non verranno toccati.

Notate che stiamo inserendo il valore tra apici. Ricordate di farlo anche quando usate un motore di selettori CSS JavaScript. Quando possibile, usate sempre selettori CSS3 prima dei metodi non ufficiali.

Questo sistema funziona bene, anche se è un po' rigido. E se il link è diretto verso Nettuts+, ma il percorso è nettuts.com al posto dell'intero url? In quei casi possiamo usare un po' di sintassi delle espressioni regolari.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

Ci siamo; ecco ciò di cui abbiamo bisogno. La stella indica che il valore che segue deve apparire da qualche parte nel valore dell'attributo. In questo modo considererà nettuts.com, net.tutsplus.com e anche tutsplus.com.

Tenete a mente che questa è un'ampia dichiarazione. Cosa succede se l'anchor tag conduce verso qualche sito non-Envato con la stringa tuts nell'url? Quando dovete essere più specifici usate ^ e $ per avere un riferimento all'inizio e alla fine della stringa, rispettivamente.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

Vi siete mai chiesti come alcuni siti Web sono in grado di visualizzare una piccola icona accanto ai link che sono esterni? Siamo sicuri li abbiate già visti; sono simpatici promemoria per informarvi che il link vi condurrà verso un sito Web completamente diverso.

Si tratta di un gioco da ragazzi con il simbolo di accento circonflesso. Viene più comunemente usato nelle espressioni regolari per indicare l'inizio della stringa. Se vogliamo selezionare tutti gli anchor tags che hanno un href che inizia con http, potremmo anche usare un selettore simile allo snippet mostrato sopra.

Notate che non stiamo cercando https://; non è necessario e non tiene conto degli url che iniziano con https://.

Ora, se vogliamo invece creare dello stile per tutti gli anchor tags con collegamento a una foto? In quei casi, cercate la fine della stringa.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

Di nuovo, usiamo un simbolo delle espressioni regolari $, per avere un riferimento alla fine della stringa. In questo caso, stiamo cercando tutti gli anchor tags che hanno un collegamento ad un'immagine -- o al limite un url che termina con .jpg. Tenete a mente che sicuramente non funzionerà per gifs e pngs.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[dati-*="foo"]

Fate riferimento al numero otto; come affrontiamo tutti i diversi tipi d'immagine: png, jpeg, jpg, gif? Bene, potremmo creare selettori multipli, come:

Si tratta di un sistema non semplice ed è inefficiente. Un'altra soluzione possibile è l'utilizzo di attributi custom. E se avessimo aggiunto il nostro attributo data-filetype ad ogni anchor tag con collegamento ad un'immagine?

Quindi, con quell'aggancio in gioco, possiamo usare un selettore di attributi standard per selezionare solo quegli anchor tags.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

Eccone uno speciale che impressionerà i vostri amici. Non molte persone conoscono questo trucco. Il simbolo tilde (~) ci permette di selezionare un attributo che ha una lista di valori separati da spazi.

Continuando con i nostri attributi custom come dal numero quindici, in alto, potremmo creare un attributo data-info, che potrà ricevere una lista separata da spazi di qualsiasi cosa di cui abbiamo bisogno di prendere nota. In questo caso, prenderemo nota di collegamenti esterni e collegamenti ad immagini -- giusto per esempio.

Con il markup impostato, possiamo ora selezionare qualsiasi tag con ognuno di quei valori, usando il trucco del selettore attributi ~.

Piuttosto carino, eh?

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

Questa pseudo classe selezionerà soltanto un elemento di interfaccia utente checked - come un pulsante radio o una checkbox. È semplice come sembra.

Demo

Compatibilità

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

Le pseudo classi before e after spaccano. Ogni giorno, sembra, le persone stanno trovando metodi nuovi e creativi per usarle efficacemente. Generano semplicemente contenuto intorno all'elemento selezionato.

Molti sono stati introdotti a queste classi quando hanno incontrato l'hack clear-fix.

Questo hack sfrutta la pseudo classe :after per aggiungere uno spazio tra elementi, poi lo cancella. È un trucco eccellente da tenere nella vostra tool bag, specialmente nei casi in cui il metodo overflow: hidden; non è possibile.

Per un altro utilizzo creativo, fate riferimento al mio rapido promemoria su come creare ombre.

In accordo con le specifiche dei Selettori CSS3 dovreste usare la sintassi del pseudo elemento con i doppi due punti ::. Comunque, per essere compatibile, lo user-agent accetterà in ogni caso l'utilizzo di un singolo doppio punto. Infatti, a questo punto, sarà più smart usare la versione con un singolo doppio punto nei vostri progetti.

Compatibilità

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

Avanti su. Questo lo conoscete. Il termine ufficiale per questo è user action pseudo class. Sembra confuso, ma non lo è affatto. Volete applicare dello stile specifico quando un utente passa sopra un elemento? Questo selettore svolgerà il lavoro!

Tenete a mente che la versione precedente di Internet Explorer non funziona quando la pseudo classe :hover viene applicata a qualsiasi altra cosa che non sia un anchor tag.

Userete spesso questo selettore quando applicherete, per esempio, un border-bottom agli anchor tags, al passaggio con il mouse.

Pro-tip - border-bottom: 1px solid black; sembra meglio di text-decoration: underline;.

Compatibilità

  • IE6+ (In IE6, :hover deve essere applicato a un elemento di ancoraggio)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

La pseudo classe negation è particolarmente utile. Diciamo di voler selezionare tutti i divs, eccetto uno con id container. Lo snippet soprastante gestirà perfettamente quel compito.

O, se volessimo selezionare ogni singolo elemento (non consigliato) eccetto i tags paragrafo, potremmo fare:

Demo

Compatibilità

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

Possiamo usare pseudo elementi (indicati con ::) per creare lo stile di frammenti di un elemento, come la prima linea, o la prima lettera. Tenete a mente che questi devono essere applicati per bloccare gli elementi di livello al fine di avere effetto.

Uno pseudo-elemento è composto da due doppi punti ::.

Selezionare la Prima Lettera di un Paragrafo

Questo snippet è un'astrazione che cercherà tutti i paragrafi sulla pagina, e poi selezionerà unicamente la prima lettera di quell'elemento.

È molto spesso usato per creare nei newspapers gli stili per la prima lettera di un articolo.

Selezionare la Prima Linea di un Paragrafo

Analogamente, lo pseudo elemento ::first-line, come atteso, darà lo stile soltanto alla prima linea dell'elemento.

"Per compatibilità con i fogli di stile esistenti, gli user agents devono accettare la precedente notazione a singolo doppio punto per gli pseudo-elementi introdotti in CSS ai livelli 1 e 2 (cioè :first-line, :first-letter, :before e :after). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica." - Source

Demo

Compatibilità

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

Ricordate i giorni in cui non avevamo modo di selezionare elementi specifici in uno stack? La pseudo classe nth-child risolve quel problema!

Per favore notate che nth-child accetta un intero come parametro e comunque non è a base zero. Se volete selezionare il secondo elemento di una lista, usate li:nth-child(2).

Possiamo anche usarlo per selezionare un set variabile di elementi figlio. Per esempio, potremmo usare li:nth-child(4n) per selezionare ogni quarto elemento di lista.

Demo

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

Cosa fate se avete una lista enorme di elementi in un ul e avete bisogno di accedere, diciamo, al terzultimo elemento? Piuttosto che scrivere li:nth-child(397) potete invece usare la pseudo classe nth-last-child.

Questa tecnica funziona in modo quasi identico dal numero sedici in su, comunque la differenza consiste nel fatto che inizia alla fine della collezione e va a ritroso.

Demo

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

Ci saranno dei momenti in cui, piuttosto che selezionare un child, dovrete invece selezionare a seconda del type dell'elemento.

Immaginate un mark-up contenente cinque liste non ordinate. Se voleste dare stile solo al terzo ul, e non aveste un unico id cui appoggiarvi, potreste usare la pseudo classe nth-of-type(n). Nello snippet soprastante solo il terzo ul avrà un bordo intorno a sé.

Demo

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

E sì, per rimanere coerenti, possiamo anche usare nth-last-of-type per iniziare alla fine dell'elenco di selettori e proseguire la nostra strada a ritroso per selezionare l'elemento desiderato.

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

Questa pseudo classe strutturale ci consente di selezionare solo il primo figlio dell'elemento genitore. La userete spesso per rimuovere bordi dai primi e ultimi elementi dell'elenco. 

Per esempio, diciamo che avete un elenco di righe e ognuna ha un border-top e un border-bottom. Bene, con quella disposizione, il primo e ultimo elemento in quel set sembrerà un po' strano.

Molti designers per rimediare applicano le classi first e last. Potete invece usare queste pseudo classi.

Demo

Compatibilità

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

L'opposto di first-child, last-child selezionerà l'ultimo oggetto del genitore dell'elemento.

Esempio

Facciamo un semplice esempio per dimostrare un possibile utilizzo di queste classi. Creeremo un elenco di oggetti.

Markup

Niente di speciale qui; giusto un semplice elenco.

CSS

Questo stile imposterà un background, rimuoverà il padding di default del browser in ul e applicherà dei bordi su ogni li per dare un minimo di profondità.

Styled ListStyled ListStyled List

Per aggiungere profondità ai vostri elenchi applicate border-bottom ad ogni li che è di un'ombra o due più scura del colore di background del li. Poi applicate border-top che è di un paio d'ombre più leggero.

Il solo problema, come mostrato nell'immagine sopra, è che il bordo sarà applicato all'estremità più alta e bassa dell'elenco non ordinato - il che sembra strano. Usiamo le pseudo classi :first-child e :last-child per sistemare.

FixedFixedFixed

Eccoci; l'abbiamo sistemato!

Demo

Compatibilità

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Yep - IE8 supportava :first-child, ma non :last-child. Vai a capire.

28. X:only-child

Verosimilmente, non vi troverete a usare la pseudo classe only-child molto spesso. Ciò nonostante è disponibile nel caso in cui ne abbiate bisogno.

Permette di selezionare elementi che sono figli unici del proprio genitore. Per esempio, riferendoci allo snippet in alto, solo il paragrafo che è figlio unico di div verrà colorato in rosso.

Supponiamo il seguente markup.

In questo caso, i secondi paragrafi di div non saranno selezionati, solo il primo div. Appena assegnerete più di un figlio a un elemento, la pseudo classe only-child smetterà di avere effetto.

Demo

Compatibilità

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

Questa pseudo classe strutturale può essere usata in maniera intelligente. Selezionerà elementi che non hanno figli all'interno del contenitore genitore. Come esempio, selezioniamo tutti gli ul che hanno un unico oggetto in elenco.

Primo, chiedetevi come risolvereste questo problema? Potreste scrivere ul li ma selezionerebbe tutti gli oggetti in elenco. L'unico modo è usare only-of-type.

Demo

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

La pseudo classe first-of-type vi permetterà di selezionare i primi figli con quel type.

Test

Per comprendere meglio facciamo un test. Copiate il seguente mark-up nel vostro editor:

Ora, senza leggere ulteriormente, cercate di capire come selezionare soltanto "List Item 2". Quando l'avete capito (o vi siete arresi) continuate a leggere.

Soluzione 1

Ci sono molteplici modi per risolvere questo test. Ne vedremo alcuni. Cominciamo usando first-of-type.

Questo snippet sostanzialmente dice "trovate il primo elenco non ordinato della pagina, poi trovate i figli diretti che sono oggetti d'elenco. In seguito, filtrate fino al secondo oggetto dell'elenco in quel set.

Soluzione 2

Un'altra opzione è di usare il selettore adiacente.

In questo scenario, troviamo l'ul che precede immediatamente il tag p, e poi troviamo l'ultimo figlio dell'elemento.

Soluzione 3

Possiamo essere sia pedanti che spigliati con questi selettori.

Questa volta, prendiamo il primo ul della pagina e poi troviamo il primo elemento dell'elenco, cominciando però dalla fine! :)

Demo

Compatibilità

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Conclusione

Se cercate di compensare le mancanze di browsers più antiquati, come Internet Explorer 6, dovete fare attenzione quando utilizzate questi più recenti selettori. Ma, non lasciate che ciò vi precluda il loro apprendimento. Fareste un enorme sfavore a voi stessi. Siate sicuri di fare riferimento a questa lista di compatibilità dei browsers. Alternativamente, potete usare lo script IE9.js di Dean Edward per avere supporto per questi selettori sui vecchi browsers.

In secondo luogo, quando lavorate con librerie JavaScript, come la popolare jQuery, cercate sempre di usare questi selettori CSS3 nativi al posto dei metodi/selettori della libreria, laddove possibile. Renderà il vostro codice più veloce, dal momento che il motore dei selettori potrà usare il parsing nativo del browser, piuttosto che il proprio.

Grazie per la lettura, e speriamo che abbiate portato a casa un trucco o due!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.