I 30 selettori CSS Devi memorizzare

Learn CSS: The Complete Guide

Abbiamo creato una guida completa per aiutarti a imparare i CSS, sia che tu abbia appena iniziato con le basi o che tu voglia esplorare CSS più avanzati.

Selettori CSS

Quindi hai imparato i selettori di base id, class e descendant – e poi l’hai chiamato un giorno? Se è così, ti stai perdendo un enorme livello di flessibilità. Lo devi a te stesso di impegnare questi selettori CSS e CSS3 avanzati in memoria.

Selettori di base

1. *

* { margin: 0; padding: 0;}

Buttiamo fuori quelli ovvi, per i principianti, prima di passare ai selettori più avanzati.

Il simbolo stella avrà come target ogni singolo elemento della pagina. Molti sviluppatori useranno questo trucco per azzerare i margin e padding. Anche se questo va certamente bene per i test rapidi, ti consiglierei di non usarlo mai nel codice di produzione. Si aggiunge troppo peso sul browser, ed è inutile.

Il * può essere utilizzato anche con selettori figlio.

#container * { border: 1px solid black;}

Questo avrà come target ogni singolo elemento figlio di #containerdiv. Ancora una volta, cerca di non usare molto questa tecnica, se mai.

2. # X

#container { width: 960px; margin: auto;}

Il prefisso del simbolo hash a un selettore ci consente di scegliere come target id. Questo è facilmente l’uso più comune; tuttavia, essere cauti quando si utilizzano i selettori id.

Chiediti: ho assolutamente bisogno di applicare un id a questo elemento per indirizzarlo?

id i selettori sono rigidi e non consentono il riutilizzo. Se possibile, prima prova a utilizzare un nome di tag, uno dei nuovi elementi HTML5 o anche una pseudo-classe.

3. .X

.error { color: red;}

Questo è un selettore class. La differenza tra id s e class es è che, con quest’ultimo, è possibile indirizzare più elementi. Usa class es quando vuoi che il tuo stile si applichi a un gruppo di elementi. In alternativa, utilizzare id s per trovare un ago in un pagliaio e modellare solo quell’elemento specifico.

4. X

a { color: red; }ul { margin-left: 0; }

Cosa succede se si desidera indirizzare tutti gli elementi di una pagina, in base al loro type, piuttosto che un nome ido class? Mantienilo semplice e usa un selettore di tipo. Se è necessario indirizzare tutti gli elenchi non ordinati, utilizzare ul {}.

Demo live dei selettori di base

Selettori Combinator

5. X Y

li a { text-decoration: none;}

Il prossimo selettore più comune è il selettore descendant. Quando hai bisogno di essere più specifico con i tuoi selettori, li usi. Ad esempio, cosa succede se, piuttosto che mirare a tutti i tag di ancoraggio, devi solo indirizzare gli ancoraggi che si trovano all’interno di un elenco non ordinato? Questo è specificamente quando useresti un selettore discendente.

Pro-tip: Se il tuo selettore assomiglia a X Y Z A B.error ,lo stai facendo male. Chiediti sempre se è assolutamente necessario applicare tutto quel peso.

6. X + Y

ul + p { color: red;}

Questo è indicato come un selettore adiacente. Selezionerà solo l’elemento immediatamente preceduto dall’elemento precedente. In questo caso, solo il primo paragrafo dopo ogni ul avrà testo rosso.

7. X > Y

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

La differenza tra lo standard X Y e X > Y è che quest’ultimo selezionerà solo i bambini diretti. Ad esempio, considera il seguente markup.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un selettore di #container > ulindirizzerà solo i ul che sono figli diretti di div con un iddi container. Non prenderà di mira, ad esempio, il ul che è figlio del primo li.

Per questo motivo, ci sono vantaggi in termini di prestazioni nell’utilizzo del combinator figlio. In effetti, è consigliato in particolare quando si lavora con motori di selezione CSS basati su JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Questo combinator fratello è simile a X + Y, ma è meno rigoroso. Mentre un selettore adiacente (ul + p) selezionerà solo il primo elemento che è immediatamente preceduto dal selettore precedente, questo è più generalizzato. Selezionerà, facendo riferimento al nostro esempio sopra, qualsiasi elemento p, purché seguano un ul.

Demo live dei selettori Combinator

Selettori di attributi

9. X

a { color: green;}

Indicato come selettore di attributi, nel nostro esempio sopra, questo selezionerà solo i tag di ancoraggio che hanno un attributo title. I tag di ancoraggio che non lo fanno non riceveranno questo particolare stile. Ma cosa succede se hai bisogno di essere più specifico? Controlla il prossimo esempio!

10. X

a { color: #83b348; /* Envato green */}

Lo snippet sopra disegnerà tutti i tag di ancoraggio che si collegano a https://code.tutsplus.com; riceveranno il nostro colore verde di marca. Tutti gli altri tag di ancoraggio rimarranno inalterati.

Si noti che stiamo avvolgendo il valore tra virgolette. Ricordarsi di farlo anche quando si utilizza un motore di selezione CSS JavaScript. Quando possibile, utilizzare sempre selettori CSS3 su metodi non ufficiali.

Funziona bene, anche se è un po ‘ rigido. Cosa succede se il link è effettivamente diretto a Envato Tuts+, ma forse il percorso è code.tutsplus.com piuttosto che l’URL completo? In questi casi, possiamo usare un po ‘ della sintassi delle espressioni regolari.

11. X

a { color: #83b348; /* Envato green */}

Ci siamo; questo è quello che ci serve. La stella indica che il valore del procedimento deve apparire da qualche parte nel valore dell’attributo. In questo modo, questo copre tutsplus.com, code.tutsplus.com, e anche webdesign.tutsplus.com.

Tieni presente che questa è una dichiarazione ampia. Cosa succede se il tag di ancoraggio è collegato a un sito non Envato con la stringa tutsplus nell’URL? Quando è necessario essere più specifici, utilizzare ^ e $, per fare riferimento rispettivamente all’inizio e alla fine di una stringa.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Vi siete mai chiesti come alcuni siti web sono in grado di visualizzare una piccola icona accanto ai link che sono esterni? Sono sicuro che hai visto questi prima; sono belle promemoria che il link vi indirizzerà a un sito completamente diverso.

Questo è un gioco da ragazzi con il simbolo carato. È più comunemente usato nelle espressioni regolari per designare l’inizio di una stringa. Se vogliamo indirizzare tutti i tag di ancoraggio che hanno un href che inizia con http, potremmo usare un selettore simile allo snippet mostrato sopra.

Si noti che non stiamo cercando https://; non è necessario e non tiene conto degli URL che iniziano con https://.

Ora, cosa succede se volessimo invece modellare tutte le ancore che si collegano, ad esempio, a una foto? In questi casi, cerchiamo la fine della stringa.

13. X

a { color: red;}

Ancora una volta, usiamo un simbolo di espressioni regolari, $, per fare riferimento alla fine di una stringa. In questo caso, stiamo cercando tutte le ancore che si collegano a un’immagine, o almeno un URL che termina con .jpg. Tieni presente che questo non catturerà immagini GIF e PNG.

14. X

a { color: red;}

Come compensare tutti i vari tipi di immagine? Bene, potremmo creare più selettori, come ad esempio:

a,a,a,a { color: red;}

Ma questo è un dolore, ed è inefficiente. Un’altra possibile soluzione è utilizzare attributi personalizzati. Cosa succede se abbiamo aggiunto il nostro attributo data-filetype a ciascun ancoraggio che si collega a un’immagine?

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

Quindi, con quel gancio in posizione, possiamo usare un selettore di attributi standard per indirizzare solo quelle ancore.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Ecco uno speciale che impressionerà i tuoi amici. Non troppe persone sanno di questo trucco. Il simbolo tilde (~) ci consente di indirizzare un attributo che ha un elenco di valori separati da spazi.

Seguendo il nostro attributo personalizzato dal numero 15, sopra, potremmo creare un attributo data-info, che può ricevere un elenco separato da spazi di tutto ciò di cui abbiamo bisogno per prendere nota. In questo caso, prenderemo nota dei link esterni e dei link alle immagini—solo per l’esempio.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Con quel markup in atto, ora possiamo indirizzare qualsiasi tag che abbia uno di questi valori, usando il trucco del selettore degli attributi ~.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

Piuttosto elegante, eh?

Demo live dei selettori di attributi

Pseudo Selettori

16. X: visitato e X:link

a:link { color: red; }a:visited { color: purple; }

Usiamo la pseudo-classe :link per indirizzare tutti i tag di ancoraggio che devono ancora essere cliccati.

In alternativa, abbiamo anche la pseudo classe :visited, che, come ci si aspetterebbe, ci consente di applicare uno stile specifico solo ai tag di ancoraggio sulla pagina su cui è stato fatto clic o “visitato”.

17. X: checked

input:checked { border: 1px solid black;}

Questa pseudo classe avrà come target solo un elemento dell’interfaccia utente che è stato selezionato, come un pulsante di opzione o una casella di controllo. È così semplice.

18. X: dopo

Le pseudo classi before e after sono fantastiche. Ogni giorno, a quanto pare, le persone stanno trovando modi nuovi e creativi per usarli in modo efficace. Generano semplicemente contenuti attorno all’elemento selezionato.

Molti sono stati introdotti per la prima volta a queste classi quando hanno incontrato l’hack clear-fix.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

Questo hack utilizza la pseudo classe :after per aggiungere uno spazio dopo l’elemento e quindi cancellarlo. È un trucco eccellente da avere nella tua borsa degli attrezzi, in particolare nei casi in cui il metodo overflow: hidden; non è possibile.

Per un altro uso creativo di questo, fare riferimento al mio suggerimento rapido sulla creazione di ombre.

Secondo le specifiche dei selettori CSS3, è necessario utilizzare tecnicamente la sintassi pseudo elemento di due punti ::. Tuttavia, per rimanere compatibile, l’user-agent accetterà anche un singolo utilizzo dei due punti.

19. X: hover

div:hover { background: #e3e3e3;}

Oh andiamo. Questa la conosci. Il termine ufficiale per questo è “user action pseudo class”. Sembra confuso, ma in realtà non lo è. Vuoi applicare uno stile specifico quando un utente si libra su un elemento? Questo otterrà il lavoro fatto!

Tieni presente che le versioni precedenti di Internet Explorer non rispondono quando la pseudo classe :hover viene applicata a qualcosa di diverso da un tag di ancoraggio.

Userai più spesso questo selettore quando applichi, ad esempio, un border-bottom per ancorare i tag, quando si passa sopra.

a:hover { border-bottom: 1px solid black;}

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

20. X: non (selettore)

div:not(#container) { color: blue;}

La pseudo classe di negazione è particolarmente utile. Diciamo che voglio selezionare tutti div s, ad eccezione di quello che ha un id di container. Lo snippet sopra gestirà perfettamente quell’attività.

Oppure, se volessi selezionare ogni singolo elemento (non consigliato) ad eccezione dei tag di paragrafo, potremmo fare:

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

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Possiamo usare pseudo elementi (designati da ::) per modellare frammenti di un elemento, come la prima riga o la prima lettera. Tieni presente che questi devono essere applicati agli elementi a livello di blocco per avere effetto.

Uno pseudo-elemento è composto da due punti e due punti: ::

Target la prima lettera di un paragrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Questo snippet è un’astrazione che troverà tutti i paragrafi della pagina e quindi sub-target solo la prima lettera di quell’elemento.

Viene spesso utilizzato per creare uno stile simile a un giornale per la prima lettera di un articolo.

Indirizza la prima riga di un paragrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

Allo stesso modo, lo pseudo elemento ::first-line, come previsto, modellerà solo la prima riga dell’elemento.

” Per la compatibilità con i fogli di stile esistenti, gli interpreti devono accettare anche la precedente notazione a due punti per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire, :first-line, :first-letter, :before e :after). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.”- Specifiche dei selettori W3C

Demo live di pseudo selettori

Nth Child and Type Selectors

22. X: nth-bambino (n)

li:nth-child(3) { color: red;}

Ricorda i giorni in cui non avevamo modo di indirizzare elementi specifici in una pila? La pseudo classe nth-child lo risolve!

Si noti che nth-child accetta un numero intero come parametro, ma questo non è basato su zero. Se si desidera indirizzare la seconda voce dell’elenco, utilizzare li:nth-child(2).

Possiamo anche usare questo per selezionare un set di variabili di bambini. Ad esempio, potremmo fare li:nth-child(4n) per selezionare ogni quarta voce di elenco.

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

li:nth-last-child(2) { color: red;}

Cosa succede se hai un enorme elenco di elementi in un ul e hai solo bisogno di accedere, ad esempio, al terz’ultimo elemento? Invece di fare li:nth-child(397), potresti invece usare la pseudo classe nth-last-child.

Questa tecnica funziona in modo quasi identico al numero 16 sopra. La differenza è che inizia alla fine della collezione e torna indietro.

24. X: nth-di-tipo(n)

ul:nth-of-type(3) { border: 1px solid black;}

Ci saranno momenti in cui, piuttosto che selezionare un child, è invece necessario selezionare in base al type dell’elemento.

Immagina il markup che contiene cinque elenchi non ordinati. Se si desidera creare solo il terzo ul e non si dispone di un id unico da collegare, è possibile utilizzare la pseudo classe nth-of-type(n). Nel frammento sopra, solo il terzo ul avrà un bordo attorno ad esso.

25. X: nth-ultimo-di-tipo(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

E sì, per rimanere coerenti, possiamo anche usare nth-last-of-type per iniziare alla fine dell’elenco dei selettori e tornare indietro per indirizzare l’elemento desiderato.

26. X: first-child

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

Questa pseudo classe strutturale ci consente di indirizzare solo il primo figlio del genitore dell’elemento. Lo userai spesso per rimuovere i bordi dalla prima e dall’ultima voce dell’elenco.

Ad esempio, diciamo che hai un elenco di righe e ognuna ha un border-tope un border-bottom. Bene, con quella disposizione, il primo e l’ultimo elemento in quel set sembreranno un po ‘ strani.

Molti designer applicano classi di first e last per compensare ciò. Invece, puoi usare queste pseudo classi.

27. X: last-child

ul > li:last-child { color: green;}

L’opposto di first-child, last-child avrà come target l’ultimo elemento del genitore dell’elemento.

last-child Selector Example

Costruiamo un semplice esempio per dimostrare un possibile uso di queste classi. Creeremo una voce di elenco in stile.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Per il markup, non c’è niente di speciale: solo una semplice lista.

Ecco il CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

Questo stile imposterà uno sfondo, rimuoverà il padding predefinito del browser su ul e applicherà i bordi a ciascuno li per fornire un po ‘ di profondità.

Per aggiungere profondità ai tuoi elenchi, applica un border-bottom a ogni liche è una tonalità o due più scure del colore di sfondo di li. Quindi, applicare un border-top che è un paio di tonalità più chiare.

L’unico problema, come mostrato nell’immagine sopra, è che un bordo verrà applicato alla parte superiore e inferiore dell’elenco non ordinato, il che sembra strano. Usiamo le pseudo classi :first-child e :last-child per risolvere questo problema.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Ci siamo; che lo risolve!

28. X: only-child

div p:only-child { color: red;}

Sinceramente, probabilmente non ti ritroverai a usare la pseudo classe only-child troppo spesso. Tuttavia, è disponibile, se ne avete bisogno.

Consente di indirizzare gli elementi che sono l’unico figlio del suo genitore. Ad esempio, facendo riferimento allo snippet sopra, solo il paragrafo che è l’unico figlio di div sarà colorato in rosso.

Assumiamo il seguente markup.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

In questo caso, i paragrafi del secondo divnon saranno mirati; solo il primo div. Non appena si applica più di un figlio a un elemento ,la pseudo classe only-child cessa di avere effetto.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Questa pseudo classe strutturale può essere utilizzata in alcuni modi intelligenti. Prenderà di mira gli elementi che non hanno fratelli all’interno del suo contenitore padre. Ad esempio, cerchiamo di indirizzare tutti ul s che hanno solo un singolo elemento di elenco.

Per prima cosa, chiediti come realizzeresti questo compito. Potresti fare ul li, ma questo avrebbe come target tutti gli elementi dell’elenco. L’unica soluzione è usare only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

La pseudo classe first-of-type consente di selezionare i primi fratelli del suo tipo.

Un test

Per capire meglio questo, facciamo un test. Copia il seguente markup nel tuo editor di codice:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Ora, senza leggere ulteriormente, prova a capire come indirizzare solo “Elemento elenco 2”. Quando hai capito (o rinunciato), continuate a leggere.

Soluzione 1

Esistono vari modi per risolvere questo test. Ne ripasseremo una manciata. Iniziamo usando first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Questo frammento dice essenzialmente, per trovare il primo elenco non ordinato sulla pagina, quindi trovare solo i bambini immediati, che sono elementi dell’elenco. Quindi, filtrare fino a solo la seconda voce di elenco in quel set.

Soluzione 2

Un’altra opzione è quella di utilizzare il selettore adiacente.

p + ul li:last-child { font-weight: bold;}

In questo scenario, troviamo il ul che procede immediatamente al tag p, quindi troviamo l’ultimo figlio dell’elemento.

Soluzione 3

Possiamo essere antipatici o giocosi come vogliamo con questi selettori.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Questa volta, prendiamo il primo ul sulla pagina, quindi troviamo la prima voce di elenco, ma partendo dal basso!

Demo live di Nth Child e Type Selectors

Conclusione

Se stai compensando i browser più vecchi, come Internet Explorer 6, devi comunque fare attenzione quando usi questi selettori più recenti. Ma per favore non lasciate che vi dissuada da imparare questi. Ti staresti facendo un enorme cattivo servizio a te stesso. Assicurati di fare riferimento qui per un elenco di compatibilità del browser. In alternativa, è possibile utilizzare l’eccellente IE9 di Dean Edward.script js per portare il supporto per questi selettori ai browser più vecchi.

In secondo luogo, quando si lavora con le librerie JavaScript, come il popolare jQuery, cercare sempre di utilizzare questi selettori CSS3 nativi sui metodi/selettori personalizzati della libreria, quando possibile. Renderà il tuo codice più veloce, poiché il motore di selezione può utilizzare l’analisi nativa del browser, piuttosto che il suo.

È fantastico che tu stia trascorrendo del tempo a imparare i fondamenti del web design, ma se hai bisogno di una soluzione rapida, uno dei nostri modelli CSS pronti all’uso potrebbe essere una buona opzione. Abbiamo anche alcuni elementi CSS premium da considerare.

• 
  CSS3
  15 Eleganti CSS, Tabelle dei Prezzi, per il Tuo Ultimo Progetto Web
  Monty Shokeen
• 
  Bootstrap 4
  18 Migliori Bootstrap 4 Plugins
  Monty Shokeen

Accesso gratuito a Envato Elementi per 1 Mese

Infine, ecco un’offerta speciale per aiutarvi a costruire professionali per siti e applicazioni. Oltre a utilizzare questi selettori CSS, perché non approfittare di foto di alta qualità, riprese video, font premium, grafica, illustrazioni e altro ancora?

Normalmente, dovresti pagare per risorse del genere. Ma in questo momento, puoi accedere a milioni di risorse creative per i tuoi progetti di codifica per un mese intero, completamente gratuito. E cosa c’è di più, si ottiene download illimitati, in modo da poter afferrare quanto si vuole durante quel mese, e pagare solo se si decide di continuare!

Per usufruire di questa offerta, fare clic su questo link di registrazione speciale o inserire il codice sottostante nella pagina di registrazione:

elements_cont_tuts-freemonth1-4bwkbp

Non aspettare troppo-l’offerta è valida solo per un tempo limitato!